CSS :first-child Pseudo-class

Definition and Usage

CSS :first-child Pseudo-classes are used to select elements that are the first child of their parent element (within a group of sibling elements).

Examples

Example 1

Select and set the style of each <p> element that is the first child of its parent element:

p:first-child {
  background-color: yellow;
}

Try it yourself

Example 2

Select and set the style of each <i> element that is the first child of its parent element:

i:first-child {
  background: yellow;
}

Try it yourself

Example 3

Select and set the style of the first <li> element in the list:

li:first-child {
  background: yellow;
}

Try it yourself

Example 4

Select and set the style of the first child of each <ul> element:

ul > :first-child {
  background: yellow;
}

Try it yourself

CSS Syntax

:first-child {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version to fully support the pseudo-class.