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 indicate the first browser version that fully supports the pseudo-class.