pseudo-class
:first-child Pseudo-Class
Matches an element that is the first child of its parent. It looks at all sibling elements, not just siblings of the same type.
:first-childExample
li:first-child { font-weight: bold; } /* First <li> in a list */✓ Matches
- <ul><li>A</li><li>B</li></ul> the first li matches
- <div><p>First</p><p>Next</p></div> the first p matches
- <section><h1>Title</h1></section> the h1 matches
✗ Does not match
- the second <li> in a two-item list
- <div><span></span><p>Not first</p></div> the p does not match
Browser support
Universal support in all browsers since CSS2.