In CSS, items are matched according to their position within the set of siblings, counting from the end and using the nth-last-child selector.
Syntax
The following syntax is used to get the last child and apply CSS properties.
:nth-last-child(number) {
//CSS Property
}
- Where number is the input: The number is counted from the end, and it represents the pattern for matched components. It may be written in a functional notation, odd, or even.
- Odd: Counting from the end, it represents items in a series whose positions are odd, such as 1, 3, 5, etc.
- Even: Counting from the end, it denotes the elements in a sequence whose positions are even: 2, 4, 6, etc.
- Notation for functionality : It shows elements for each positive integer or zero value of n whose sibling positions match the pattern An+B.
Examples
The samples demonstrate the nth-last-child selector for styling, along with odd and even elements.
Example 1:
The example demonstrates the use of the nth-last-child selector with odd values for styling purposes.
<!DOCTYPE html>
<html>
<head>
<title> The nth-last-child Selector in CSS </title>
<style>
p:nth-last-child(2n) {
background: red;
color: white;
}
</style>
</head>
<body style = "text-align:center; background-color:beige;">
<h1 style = "color:red;">
C# Tutorial Website
</h1>
<h2>
The nth-last-child Selector in CSS
</h2>
<p>
A computer science website for students or developers.
</p>
<p>
HTML and CSS for web development
</p>
<p>
CSS nth-last-child Selector with even tags for the web development
</p>
<p>
CSS nth-last-child Selector for the web development
</p>
</body>
</html>
Output:
Example 2:
The example demonstrates the nth-last-child selector paired with an even-numbered values tag for styling purposes.
<!DOCTYPE html>
<html>
<head>
<title> The nth-last-child Selector in CSS </title>
<style>
p:nth-last-child(2n+1) {
background: red;
color: white;
}
</style>
</head>
<body style = "text-align:center; background-color:beige;">
<h1 style = "color:red;">
C# Tutorial Website
</h1>
<h2>
The nth-last-child Selector in CSS
</h2>
<p>
A computer science website for students or developers.
</p>
<p>
HTML and CSS for web development
</p>
<p>
CSS nth-last-child Selector with odd tags for the web development
</p>
</body>
</html>
Output:
Example 3:
The example demonstrates the nth-last-child selector using odd and even values for styling purposes.
<!DOCTYPE html>
<html>
<head>
<title> The nth-last-child Selector in CSS </title>
<style>
p:nth-last-child(2n) {
background: red;
color: white;
}
p:nth-last-child(2n+1) {
background: navy;
color: white;
}
</style>
</head>
<body style = "text-align:center; background-color:beige;">
<h1 style = "color:red;">
C# Tutorial Website
</h1>
<h2>
The nth-last-child Selector in CSS
</h2>
<p>
A computer science website for students or developers.
</p>
<p>
HTML and CSS for web development
</p>
<p>
CSS nth-last-child Selector with even and odd tags for the web development
</p>
<p>
CSS nth-last-child Selector for the web development
</p>
</body>
</html>
Output:
Example 4:
The example demonstrates the nth-last-child selector with odd and even values for styling purposes. Both the odd and even functions can be applied to the <tr> tag within a table to apply unique style attributes.
<!DOCTYPE html>
<html>
<head>
<title> The nth-last-child Selector in CSS </title>
<style>
tr:nth-last-child(2n) {
background: red;
color: white;
}
tr:nth-last-child(2n+1) {
background: navy;
color: white;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body style = "text-align:center; background-color:beige;">
<h1 style = "color:red;">
C# Tutorial Website
</h1>
<h2>
The nth-last-child Selector in CSS
</h2>
<table>
<tr>
<th> Name </th>
<th> AGE </th>
<th> Country </th>
</tr>
<tr>
<td> Shyam </td>
<td> 28 </td>
<td> Germany </td>
</tr>
<tr>
<td> Ram </td>
<td> 26 </td>
<td> Mexico </td>
</tr>
<tr>
<td> Sam </td>
<td> 21 </td>
<td> Austria </td>
</tr>
<tr>
<td> Helen </td>
<td> 23 </td>
<td> UK </td>
</tr>
<tr>
<td> Sadhana </td>
<td> 22 </td>
<td>India </td>
</tr>
<tr>
<td> Anay </td>
<td> 24 </td>
<td> Italy </td>
</tr>
</table>
</body>
</html>
Output:
Example 5:
The illustration demonstrates the nth-last-child selector alongside the necessary tag index for styling purposes. The <tr> tag is employed to assign CSS properties to a specific row based on various input attributes.
<!DOCTYPE html>
<html>
<head>
<title> The nth-last-child Selector in CSS </title>
<style>
p:nth-last-child(2n) {
background: red;
color: white;
}
p:nth-last-child(2n+1) {
background: navy;
color: white;
}
tr:nth-last-child(3) {
background: darkgrey;
color: white;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body style = "text-align:center; background-color:beige;">
<h1 style = "color:red;">
C# Tutorial Website
</h1>
<h2>
The nth-last-child Selector in CSS
</h2>
<p>
A computer science website for students or developers.
</p>
<table>
<tr>
<th> Name </th>
<th> AGE </th>
<th> Country </th>
</tr>
<tr>
<td> Shyam </td>
<td> 28 </td>
<td> Germany </td>
</tr>
<tr>
<td> Ram </td>
<td> 26 </td>
<td> Mexico </td>
</tr>
<tr>
<td> Sam </td>
<td> 21 </td>
<td> Austria </td>
</tr>
<tr>
<td> Helen </td>
<td> 23 </td>
<td> UK </td>
</tr>
<tr>
<td> Sadhana </td>
<td> 22 </td>
<td>India </td>
</tr>
<tr>
<td> Anay </td>
<td> 24 </td>
<td> Italy </td>
</tr>
</table>
</body>
</html>
Output:
Example 6:
The illustration demonstrates the nth-last-child selector combined with the odd and even attributes for styling purposes. You have the option to input either odd or even keywords and implement CSS properties within a style tag.
<!DOCTYPE html>
<html>
<head>
<title> The nth-last-child Selector in CSS </title>
<style>
tr:nth-last-child(3n+1) {
background: skyblue;
color: white;
}
tr:nth-last-child(even) {
background: navy;
color: white;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body style = "text-align:center; background-color:beige;">
<h1 style = "color:red;">
C# Tutorial Website
</h1>
<h2>
The nth-last-child Selector in CSS
</h2>
<b> The nth-last-child Selector with odd and even tags </b>
<p>
A computer science website for students or developers.
</p>
<table>
<tr>
<th> Name </th>
<th> AGE </th>
<th> Country </th>
</tr>
<tr>
<td> Shyam </td>
<td> 28 </td>
<td> Germany </td>
</tr>
<tr>
<td> Ram </td>
<td> 26 </td>
<td> Mexico </td>
</tr>
<tr>
<td> Sam </td>
<td> 21 </td>
<td> Austria </td>
</tr>
<tr>
<td> Helen </td>
<td> 23 </td>
<td> UK </td>
</tr>
<tr>
<td> Sadhana </td>
<td> 22 </td>
<td>India </td>
</tr>
<tr>
<td> Anay </td>
<td> 24 </td>
<td> Italy </td>
</tr>
</table>
</body>
</html>
Output:
Example 7:
The illustration demonstrates the nth-last-child selector combined with the odd-even mathematical expressions for styling purposes. The formula format is (an + b), where 'a' represents the cycle size, 'n' signifies the counter (beginning at 0), and 'b' denotes the offset value. In this instance, we begin with the final child and assign a specific background color to every tr element whose position is a multiple of 3:
<!DOCTYPE html>
<html>
<head>
<title> The nth-last-child Selector in CSS </title>
<style>
tr:nth-last-child(3n+1) {
background: skyblue;
color: white;
}
p:nth-last-child(3n+2) {
background: navy;
color: white;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body style = "text-align:center; background-color:beige;">
<h1 style = "color:red;">
C# Tutorial Website
</h1>
<h2>
The nth-last-child Selector in CSS
</h2>
<p> The nth-last-child Selector with odd-even formula attributes </p>
<p>
A computer science website for students or developers.
</p>
<table>
<tr>
<th> Name </th>
<th> AGE </th>
<th> Country </th>
</tr>
<tr>
<td> Shyam </td>
<td> 28 </td>
<td> Germany </td>
</tr>
<tr>
<td> Ram </td>
<td> 26 </td>
<td> Mexico </td>
</tr>
<tr>
<td> Sam </td>
<td> 21 </td>
<td> Austria </td>
</tr>
<tr>
<td> Helen </td>
<td> 23 </td>
<td> UK </td>
</tr>
<tr>
<td> Sadhana </td>
<td> 22 </td>
<td>India </td>
</tr>
<tr>
<td> Anay </td>
<td> 24 </td>
<td> Italy </td>
</tr>
</table>
</body>
</html>
Output:
Supported Browsers
The following browsers and their versions are supported for the :nth-last-child selector in CSS:
- Apple Safari 3.1
- Google Chrome 4.0
- Edge 12.0
- Firefox 3.5
- Opera 9.0
Conclusion
The nth-last-child selector is employed to assign various CSS properties to a specific type of selector or tag. To target the desired element, one can utilize a formula, a number, or the odd/even keywords.