Your Search Results

    Adjacent sibling selectors


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


    former_element + target_element { style properties }


    li:first-of-type + li {
      color: red;

    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>


    Specification Status Comment
    Selectors Level 3
    The definition of 'Adjacent sibling combinator' in that specification.
    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,