mozilla
Your Search Results

    Adjacent sibling selectors

    Summary

    This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element.

    Syntax

    former_element + target_element { style properties }
    

    Example

    li:first-of-type + li {
      color: red;
    }
    
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

    Another use case might be styling of "caption span"s of the following <img> elements:

    img + span.caption {
      font-style: italic;
    }
    

    will match the following <span> elements:

    <img src="photo1.jpg"><span class="caption">The first photo</span>
    <img src="photo2.jpg"><span class="caption">The second photo</span>
    

    Specifications

    Specification Status Comment
    Selectors Level 3
    The definition of 'Adjacent sibling combinator' in that specification.
    Recommendation  
    CSS Level 2 (Revision 1)
    The definition of 'Adjacent sibling selectors' in that specification.
    Recommendation Initial definition

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) (Yes) 7.0[1] (Yes) (Yes)
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 Yes ? Yes Yes

    [1] Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector. 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

    Last updated by: teoli,