The :first-child pseudo-class matches an element that is the first element child of its parent.
Example: li:first-child styles a list item only when that li is the first child of its parent. It is the same match as :nth-child(1). For “first of this tag,” use :first-of-type.
Not deprecated. A long-standing structural pseudo-class from Selectors Level 3 / 4.
:first-child { /* or */ E:first-child { … }Example: li:first-child { font-weight: bold; }
:first-childConfirm the target is truly the first element child, then add the pseudo-class.
E:first-child when you care about both the tag and first position.:first-of-type.| Piece | Required? | Role |
|---|---|---|
| Parent with children | Yes | Siblings are checked relative to one parent |
:first-child | Yes | Matches only the first element child |
| Type selector | Optional | Limits the match to a tag (e.g. li) |
The orange border marks li:first-child. Insert a note before the list items to see the highlight move (or disappear from Item 1).
Each snippet focuses on :first-child. Extra styles stay minimal for study. Use Try It Yourself for a live editor.
Highlight the first li in a list.
<style>
li:first-child {
border: 2px solid orange;
}
</style>
<ul>
<li>Adhemar da Silva</li>
<li>Wang Junxia</li>
<li>Wilma Rudolph</li>
</ul>li:first-child only considers list items.li must also be the parent’s first element child.pp:first-child fails if another element comes first.
<style>
p:first-child {
color: #16a34a;
font-weight: 700;
}
</style>
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>Not a p — so no p:first-child here.</h2>
<p>This text isn't selected.</p>
</div>p, so p:first-child matches.h2.p is not the first child.p? Use p:first-of-type instead.Each list has its own first child.
<style>
ul li {
color: #2563eb;
}
ul li:first-child {
color: #dc2626;
font-weight: 700;
}
</style>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
</ul>
</li>
</ul>ul.ul.ul li:first-child can match in every list.Most surprises come from DOM order, not from the selector itself.
If an h2 (or any element) comes first, p:first-child will not match that p.
:first-of-typeNeed the first p even after a heading? Use :first-of-type.
In modern CSS, leading text nodes or spaces between tags do not stop :first-child. Earlier elements do.
:nth-child(1):first-child and :nth-child(1) select the same elements.
An only child is still the first child. For “exactly one child,” use :only-child.
:first-child is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.
Supported in all modern browsers for many years (Chrome 1+, Firefox 1+, Safari 3.1+, Edge 12+, IE 7+ with historical quirks in very old engines).
Bottom line: *Very old IE had edge-case bugs with comments/anonymous boxes. Safe everywhere for modern sites. It is not a JavaScript runtime API.
E:first-child = tag E and first position.:nth-child(1).One line: :first-child styles an element only when it is the first element sibling under its parent.
Style the first letter of a block with the ::first-letter pseudo-element.
8 people found this page helpful