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 (in a group of sibling elements).

Example

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 Grammar

:first-child {
  css declarations;
}

Technical details

Tabbatar da browsers

Tabbinen daɗiya ce ke tabbatar da tsarin yauyuka na wannan maganar a fagen farko.