The :only-child pseudo-class matches an element that has no element siblings — it is the sole child of its parent.
It is the same idea as :first-child:last-child, with a clearer name and lower specificity. Compare with :only-of-type, which allows siblings of other tags.
Not deprecated. CSS3 structural pseudo-class. Extremely broad browser support.
:only-child { /* declarations */ }Often typed as li:only-child, p:only-child, or .card:only-child.
Style the child when it stands alone under its parent.
:only-child or a typed form like li:only-child.:only-of-type instead if other tags are allowed beside it.| Situation | Matches :only-child? |
|---|---|
| Parent has one element child | Yes |
| Parent has two or more element children | No |
| Whitespace / comments beside one element | Yes |
One p plus a sibling span | No |
Switch between a single-item list and a multi-item list. Only the lone li matches :only-child.
Each snippet focuses on :only-child. Use Try It Yourself for a live editor.
Highlight lists that contain exactly one item.
<style>
li:only-child {
color: #c026d3;
font-weight: 600;
}
</style>
<ul>
<li>Only item</li>
</ul>
<ul>
<li>One</li>
<li>Two</li>
</ul>li — matches li:only-child.Style a paragraph only when it is the parent’s only child.
<style>
p:only-child {
background: #fce7f3;
padding: 0.5rem;
}
</style>
<div>
<p>Alone in this box</p>
</div>
<div>
<p>Has a sibling</p>
<span>Extra</span>
</div>p — matches.p + span siblings — no match.:only-child.An only child can sit deep inside a larger tree.
<style>
div:only-child {
color: #dc2626;
}
</style>
<div>
<div>I am an only child.</div>
</div>
<div>
<div>Sibling A</div>
<div>Sibling B
<div>Nested only child</div>
</div>
</div>div — red text.div is still an only child of Sibling B.If the rule never fires, check these first.
A hidden span, icon wrapper, or extra div next to your target means it is not an only child.
:only-child ≠ :only-of-type:only-of-type allows other tags beside it. Use that when you mean “only p among mixed siblings.”
:only-child equals :first-child:last-child, with lower specificity. Prefer the shorter name.
Whitespace or comments next to a single element child still allow :only-child to match.
Nested only-children are common. Each element is judged against its own parent, not the whole page.
The :only-child pseudo-class is a browser CSS selector. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers (CSS3). Safe for teaching and production.
Bottom line: No prefixes. No polyfills. It is not a runtime API.
:first-child:last-child.:only-of-type when other tags may sit beside it.One line: :only-child styles the element that stands alone under its parent.
Learn how to match the only sibling of a given tag type.
8 people found this page helpful