HTML and CSS Reference
In-Depth Information
Figure 1-33. Styling every other table row
Anything more complex than every-other-element, obviously, requires an
an + b
expression.
Note that when you want to use a negative number for
b
, you have to remove the
+
sign
or else the selector will fail entirely. Of the following two rules, only the first will do
anything. The second will be dropped by the parser and ignored.
tr:nth-child(4n - 2) {background: silver;}
tr:nth-child(3n + −2) {background: red;}
As you might expect, there is a corresponding pseudo-class in
:nth-last-child()
. This
lets you do the same thing as
:nth-child()
, except with
:nth-last-child()
you start
from the last element in a list of siblings and count backwards toward the beginning.
If you're intent on highlighting every other table row
and
making sure the very last row
is one of the rows in the highlighting pattern, either one of these will work for you:
tr:nth-last-child(odd) {background: silver;}
tr:nth-last-child(2n+1) {background: silver;} /* equivalent */
Of course, any element can be matched using both
:nth-child()
and
:nth-last-
child()
if it fits the criteria. Consider these rules, the results of which are shown in
Figure 1-34
.
li:nth-child(3n + 3) {border-left: 5px solid black;}
li:nth-last-child(4n - 1) {border-right: 5px solid black;}
It's also the case that you can string these two pseudo-classes together as
:nth-
child(1):nth-last-child(1)
, thus creating a more verbose restatement of
:only-
child
. There's no real reason to do so other than to create a selector with a higher
specificity, but the option is there.
