:first-child
Matches an element that is the first child of its parent.
Example
#.list li {
padding: 8px 0;
border-top: 1px solid #3f3f46;
}
.list li:first-child {
border-top: 0;
}<ul class="list stage" style="margin: 0; padding: 4px 14px; list-style: none;">
<li>Lesson 1: selectors</li>
<li>Lesson 2: pseudo-classes</li>
<li>Lesson 3: pseudo-elements</li>
</ul>Definition and usage
#The :first-child pseudo-class selects the element standing at the very start of its parent. li:first-child is the first bullet of every list on the page, because every list has some first bullet. Only elements count; text before them doesn’t matter.
The most common trap: the selector checks whether the element is the first child at all, not the first element of a given type. If a heading sits before the first paragraph in an article, p:first-child won’t match anything, because the heading is the first child. For cases like this, use :first-of-type, which only counts elements with the same tag.
The pseudo-class is handy for removing unnecessary spacing and borders at the edges: the first list item with no top line, the first card with no margin. :first-child means the same thing as :nth-child(1), and its mirror image is :last-child.
Syntax
#selector:first-child { property: value; }Example selectors
#- The first bullet of the list, because it stands right at the start of its parent.
- Nothing lights up: the article’s first child is
h4, not a paragraph. - The fix: the first paragraph among paragraphs, regardless of the heading before it.
- Every bullet except the first. Handy for a divider line between consecutive elements.
Example selectors in practice
#li:first-child
li:first-child { background: #7c3aed; color: #fff; }p:first-child
h4, not a paragraph.p:first-child { background: #7c3aed; color: #fff; }p:first-of-type
p:first-of-type { background: #7c3aed; color: #fff; }li:not(:first-child)
li:not(:first-child) { background: #7c3aed; color: #fff; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Before using
p:first-child, check what actually stands at the start of the parent.:first-of-typeis often the safer choice. - For an element that is the only child, there’s
:only-child. It matches when the element is simultaneously first and last. - Instead of zeroing out the border of the first element, you can write
li + li { border-top: … }orli:not(:first-child)directly.
Related entries
#- :last-childMatches an element that is the last child of its parent.
- :nth-child()Selects elements by position among siblings: every other one, every third, the first three, or everything from the seventh on.
- :nth-of-type()Selects elements by position among siblings with the same tag, for example every other image or the third paragraph.
- :not()Selects elements that match neither the given selector nor any selector in the list.
- A + BThe + sign selects element B that sits directly after element A and shares the same parent.
Spotted a mistake or missing an example? Write to us.