CSS :nth-last-of-type() Selector
The:nth-last-of-type() Selector in CSS is used to style only those elements which are the nth number of child of the parent element. The selector counts from the last-child element. A n could be a number, a keyword, or a formula.
Syntax:
:nth-last-of-type(number) {
//css Property;
}
Where number is the argument that represents the pattern for matching elements counting from the end, it can be odd, even, or in a functional notation.
- odd: It represents elements whose position is odd in a series: 1, 3, 5, etc., counting from the end.
- even: It represents the elements whose position is even in a series: 2, 4, 6, etc., counting from the end.
- functional notation (): It represents elements whose position of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element, counting from the end, is 1.
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 35px;
}
p:nth-last-of-type(3) {
background: green;
color: white;
font-weight: bold;
width: 70%;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>CSS:nth-last-of-type() Selector </h2>
<p class="geeksFORGEEKS">geeksforgeeks</p>
<p class="forgeeks">A computer science portal for geeks.</p>
<p class="geeks">Sudo placement.</p>
<p class="SUDO">GFG STANDS FOR GEEKSFORGEEKS.</p>
</center>
</body>
</html>
Output :
Example-2: In this example, every even element is selected according to formula 2n counting from the end.
<!DOCTYPE html>
<html>
<head>
<title>CSS :nth-last-of-type Selector</title>
<style>
table {
border: 1px solid green;
margin: auto;
}
/* Selects the last three element */
tr:nth-last-of-type(2n) {
background-color: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS :nth-last-of-type Selector
</h2>
<table>
<tbody>
<tr>
<td>Merge sort</td>
</tr>
<tr>
<td>Quick sort</td>
</tr>
<tr>
<td>Insertion sort</td>
</tr>
<tr>
<td>Selection sort</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Supported Browsers: The browser supported by :nth-last-of-type() Selector are listed below:
- Apple Safari 3.1
- Google Chrome 4
- Edge 12
- Firefox 3.5
- Opera 9.5
CSS :nth-last-of-type() Selector – FAQs
What does the :nth-last-of-type() selector do in CSS?
The :nth-last-of-type() selector targets elements of a specific type based on their position among siblings of the same type, counting from the last child.
How can I style every third-to-last paragraph within a section?
Use the :nth-last-of-type() selector, like section p:nth-last-of-type(3) { font-weight: bold; }, to style the third-to-last paragraph within each section.
Can :nth-last-of-type() accept complex formulas?
Yes, :nth-last-of-type() can use formulas like 2n+1 to target specific elements in a sequence from the end.
Does :nth-last-of-type() work with all types of elements?
Yes, :nth-last-of-type() works with any type of element, but only among its siblings of the same type.
Is the :nth-last-of-type() selector supported by all browsers?
Yes, the :nth-last-of-type() selector is supported by all modern browsers.
