Css :first-child selector – first child element

Css :first-child pseudo class apply to an element if it is first sibling in all direct child elements of its parent. Here are some examples.

:first-child positive example

<style type="text/css" media="screen">
.foo > p:first-child {
  background-color:lightgreen;
}
</style>
<div class="foo">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
</div>

1. Here the :first-child pseudo class style applies to all p direct child elements of div of class foo.
2. To apply style to all direct child and descendant p elements we could have used .foo p:first-child. See more info at CSS direct child vs any descendant selector.

:first-child negative example

Here no p element is first child. So background color won’t be set.

<style type="text/css" media="screen">
.foo > p:first-child {
  background-color:lightgreen;
}
</style>
<div class="foo">
  <div>div1</div>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
</div>

:first-child – include nested child elements example

This example contains two p elements which fulfil first-child requirements.

<style type="text/css" media="screen">
.foo p:first-child {
  background-color:lightgreen;
}
</style>
<div class="foo">
  <p>p1</p>
  <p>p2</p>
  <div><p>in_div_p1</p><p>in_div_p2</p></div>
  <p>p3</p>
</div>

:first-child – exclude nested child elements example

This example contains two p elements which fulfil first-child requirements. But since we are using .foo > p, only direct p child elements are eligible for this style.

<style type="text/css" media="screen">
.foo > p:first-child {
  background-color:lightgreen;
}
</style>
<div class="foo">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <div><p>in_div_p1</p><p>in_div_p2</p></div>
</div>

Specification

• W3C CSS 3 :first-child pseudo class specification