HTML and CSS Reference
In-Depth Information
The same trick works with :nth-last-child
except, as with last child, the counting is
from the end of the set of elements up. This
selects just the last two odd-numbered
li:nth-last-child(-2n+4) {
background-color: #000;
If you increase the number in front of n ,
then the pattern extends over more ele-
ments. This rule selects the middle element
out of each set of three:
li:nth-last-child(3n-1) {
background-color: #000;
Of course, this still targets only one ele-
ment out of every three. You'd need an
extra rule if you wanted a pattern ABC
instead of ABA .
Now the answer to the mini-quiz AJ posed
earlier. Here's the code again. The result is
shown in the screenshot:
ul :last-child {
background-color: #000;
Did you guess right? Without specifying
that only <li> elements that were last chil-
dren should be styled, the rule now selects
any element that is a last child. The <a>
elements are all the last child of their
respective parent <li> elements.
Search WWH ::

Custom Search