HTML and CSS Reference
In-Depth Information
first-of-type
The
:first-of-type
pseudo-class matches the first child element that is of the
selected type.
p:first-of-type {} /* first <p> element */
It matches the first paragraph element in the following markup:
<div>
<h1>Text</h1>
<p>First of type</p>
<p>Text</p>
</div>
last-of-type
The last sibling of a specific type can be selected with the
:last-of-type
pseudo-class.
strong:last-of-type {} /* last <strong> element */
This rule applies to the last
<strong>
element among its siblings.
<div>
<strong>Text</strong>
<strong>Last of type</strong>
</div>
nth-child
The
:nth-child(an + b)
pseudo-class matches every
b
child element after the children
have been divided into groups of
a
elements.
p:nth-child(1) {} /* first child */
p:nth-child(2n) {} /* even children */
p:nth-child(2n+1) {} /* odd children */
These rules apply to the following HTML markup:
<p>
<span>First and odd</span>
<span>Even</span>
<span>Odd</span>
</p>
