# Adjacent sibling selector in CSS

The adjacent sibling selector `+` allows you to select an element by its adjacent sibling above.

## Syntax

`selector1 + selector2 { }`

## Example

Let's select all the `p` tags that immediately follow the `h2` tags and color them red:

`<h2>text</h2> <p> + </p> <p> - </p> <p> - </p>` `h2 + p { color: red; }`

:

## Example

Let's select all `p` tags immediately after elements with the class `.test` and color them red:

`<p class="test"> text </p> <p> + </p> <p> - </p>` `.test + p { color: red; }`

:

## Example

Let's select all elements with the class `.elem` immediately after elements with the class `.test` and color them red:

`<p class="test"> text </p> <p class="elem"> + </p> <p> - </p>` `.test + .elem { color: red; }`

:

## See also

- the child selector
  that allows you to select elements by direct nesting
- the descendant selector,
  that allows you to select an element by its parent
- the general sibling selector
  that allows you to select elements after a given
- the universal selector
  that allows you to select all elements

← →
↑
en ru