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;
}
Search WWH ::




Custom Search