Your Search Results

    :first-child

    Summary

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

    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 Working Draft No change.
    Selectors Level 3 Recommendation Initial definition.

    Browser compatibility

    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

    Internet Explorer notes

    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.

    Document Tags and Contributors

    Last updated by: TylerH,
    Hide Sidebar