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
items:
li:nth-last-child(-2n+4) {
background-color: #000;
}
MORE COMPLEX SELECTION PATTERNS
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.
