first-child property

Author admin Reading 1 min Views 471 Published by May 30, 2012 Modified by September 12, 2024

Contents

Definition and Usage

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

element:first-child { style properties }

span:first-child { 
  
    background-color: lime; 
  
}

…where…

<div> 
  
  <span>This span is limed!</span> 
  
  <span>This span is not. :(</span> 
  
</div>

… should look like …
This span is limed! This span is not. 🙁

<ul> 
  
  <li>List 1</li> 
  
  <li>List 2</li> 
  
  <li>List 3</li> 
  
</ul>

ul li{ 
  
  color:red; 
  
} 
  
ul li:first-child{ 
  
  color:green; 
  
}

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	4.0	3.0 (1.9)	7	9.5	4

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (1.9.1)	7	10.0	3.1