:first-child

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

Try it

p {
  font-weight: bold;
}

li:first-child {
  border: 2px solid orange;
}

Track & field champions:


    
  
  • Adhemar da Silva
    • 
  
  • Wang Junxia
    • 
  
  • Wilma Rudolph
    • 
  
  • Babe Didrikson-Zaharias
    • 
  
  • Betty Cuthbert
    • 
  
  • Fanny Blankers-Koen
    • 
  
  • Florence Griffith-Joyner
    • 
  
  • Irena Szewinska
    • 
  
  • Jackie Joyner-Kersee
    • 
  
  • Shirley Strickland
    • 
  
  • Carl Lewis
    • 
  
  • Emil Zatopek
    • 
  
  • Haile Gebrselassie
    • 
  
  • Jesse Owens
    • 
  
  • Jim Thorpe
    • 
  
  • Paavo Nurmi
    • 
  
  • Sergei Bubka
    • 
  
  • Usain Bolt
    •

Syntax

css
:first-child {
  /* ... */
}

Examples

Basic example

HTML

html

  
This text is selected!

  
This text isn't selected.






  
This text isn't selected: it's not a `p`.

  
This text isn't selected.

CSS

css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Result

Styling a list

HTML

html
    
  
  • Item 1
    • 
  
  • Item 2
    • 
  
  • 
    Item 3
    
      
      
    • Item 3.1
      • 
      
    • Item 3.2
      • 
      
    • Item 3.3
      • 
    
    
  
    •

CSS

css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

Result

Specifications

Specification
Selectors Level 4
# first-child-pseudo

Browser compatibility

See also