Your Search Results

    :first-child

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

    Syntax

    How to read CSS syntax.
    element:first-child { /* style properties */ }

    Examples

    Example 1

    HTML Content

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

    CSS Content

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

    ... looks like ...

    Example 2 - Using UL

    HTML Content

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

    CSS Content

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

    ... looks like ...

    Specifications

    Specification Status Comment
    Selectors Level 4
    The definition of ':first-child' in that specification.    		 Working Draft No change
    Selectors Level 3
    The definition of ':first-child' in that specification.    		 Recommendation Initial definition

    Browser compatibility

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

    [1] Internet Explorer 7 doesn't update the styles when elements are added dynamically. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

    See also

    Document Tags and Contributors

    Tags: 
     Contributors to this page: Sebastianz, jsx, MusikAnimal, TylerH, tregagnon, kscarfone, Tripad, teoli, Sheppy, brianloveswords, enderandpeter, McGurk, myakura, Miken32, Wjjohnst, Fredchat, Mgjbot, DBaron, Nickolay, Jethro
     Last updated by: Sebastianz,