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:
html
<!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.
html
<!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
Last Updated :
05 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...