HTML and CSS Reference
In-Depth Information
last-child
The
:last-child
pseudo-class represents the last child of the selected element.
p:last-child {} /* last paragraph child */
This rule targets the last child of the following paragraph element.
<p>
<em>Text</em>
<em>Last child</em>
</p>
only-child
The
:only-child
pseudo-class matches elements that do not have any siblings.
p:only-child {} /* children without siblings */
This rule is applied to the following first
<strong>
element because it is the only
child of the paragraph. The second paragraph element has two children, so none of them
is targeted by this rule.
<p>
<strong>Only child</strong>
</p>
<p>
<strong>Text</strong>
<em>Text</em>
</p>
only-of-type
As its name implies, the
:only-of-type
selector matches the selected element only if it
does not have any siblings of the same type.
p:only-of-type {} /* only <p> element */
The following paragraph is targeted by this rule because it is the only paragraph
element of its parent.
<div>
<h1>Text</h1>
<p>Only of type</p>
</div>
