CSS Selector Level 2 » Adjacent sibling combination

This adjacent sibling combination selector will only match adjacent siblings of a specified element, that means elements must have the same parent element and must have to follow directly after the specified element.

# Syntax

Copy
E + F {
    /* declarations */
}

# Example

Copy
h3 + p {
    color: red;
}

The first <p> will be red because it's following directly the <h3> element, the other <p>'s won't be red because the don't immediately come after the heading (at the same level).

Try example in CodePen

# Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (1.0) Yes (1.3) Yes (12.0) Yes (7.0) Yes (9.5)

Please wait a moment, the comments start loading now...
explorermozillachromesafariopera