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

E + F {
    /* declarations */

# Example

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...