HTML and CSS Reference
In-Depth Information
You can also use the values “even” or “odd”, with the di
"
erence that in this
case they will count the children starting from the last one:
ul li:nth-last-child(odd) {
color: grey;
}
:NTH-OF-TYPE
The
:nth-of-type
pseudo-class works just like the
:nth-child
, with
the di
"
erence that it only counts children that match the element in the
selector.
This can be very useful if we want to target elements that may contain
di
"
erent elements within them. For example, let's imagine we want to turn
every second paragraph in a block of text blue, but we want to ignore other
elements such as images or quotations:
p:nth-of-type(even) {
color: blue;
}
You can use the same values as you would use for the
:nth-child
pseudo-class.
:NTH-LAST-OF-TYPE
You guessed it! The
:nth-last-of-type
pseudo-class can be used
exactly like the aforementioned
:nth-last-child
, but this time, it will
only target the elements that match our selector:
ul li:nth-last-of-type(-n+4) {
color: green;
}