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