CSS Combinators

Descendant Selector (space)

The descendant selector matches all elements that are descendants of a specified element. The following example selects all <p> elements inside <div> elements:

div p {
  background-color: yellow;
}

Child Selector (>)

The child selector selects all elements that are the immediate children of a specified element. The following example selects only <p> elements that are direct children of a <div>.

div > p {
  background-color: yellow;
}

Adjacent Sibling Selector (+)

The adjacent sibling selector selects an element that is directly after another specific element. The following example selects the first <p> element that is placed immediately after a <div>.

div + p {
  background-color: yellow;
}

General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element. The following example selects all <p> elements that are siblings of <div> elements.

div ~ p {
  background-color: yellow;
}