HTML and CSS Reference
In-Depth Information
nth-last-of-type
The
:nth-last-of-type(an + b)
pseudo-class matches the element of the selected type
that has
an+b
elements of that same type after it. This behavior is equivalent to the
:nth-
of-type
pseudo-class, except that elements are counted starting from the bottom instead
of the top.
p:nth-last-of-type(3) {} /* third last paragraph */
p:nth-last-of-type(-n+2) {} /* last two paragraphs */
These two rules apply to the following example. The
<em>
element is not counted
because it is not of the specified type—in this case, paragraph.
<div>
<p>Third last</p>
<p>Last two</p>
<p>Last two</p>
<em>Text</em>
</div>
nth-last-child
The
:nth-last-child(an + b)
pseudo-class represents any element that has
an+b
siblings after it. Its behavior is the same as
:nth-child
, except that it starts with the
bottom element instead of the top one.
p:nth-last-child(3) {} /* third last child */
p:nth-last-child(-n+2) {} /* last two children */
These two rules apply to the child elements in the following example:
<div>
<p>Third last</p>
<p>Last two</p>
<p>Last two</p>
</div>
empty
The
:empty
pseudo-class matches selected elements that do not have any content.
p:empty {} /* empty paragraphs */