CSS combinator

CSS combinator

A combinator is a mechanism that explains the relationship between selectors.

CSS selectors can contain multiple simple selectors. We can include a combinator between simple selectors.

There are four different combinators in CSS:

  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)
  • General sibling selector (~)

Descendant selector

The descendant selector matches all elements that are descendants of the specified element.

The following example selects all <p> elements within the <div> element:

Instance

div p {
  background-color: yellow;
}

Try it yourself

Child selector

The child selector matches all elements that are children of the specified element.

The following example selects all <p> elements that are children of the <div> element:

Instance

div > p {
  background-color: yellow;
}

Try it yourself

Adjacent sibling selector

The adjacent sibling selector matches all elements that are adjacent siblings of the specified element.

Sibling (same-level) elements must have the same parent element, 'adjacent' means 'immediately following'.

The following example selects all <p> elements that immediately follow the <div> element:

Instance

div + p {
  background-color: yellow;
}

Try it yourself

General sibling selector

The general sibling selector matches all elements that are siblings of the specified element.

The following example selects all <p> elements that are siblings of the <div> element:

Instance

div ~ p {
  background-color: yellow;
}

Try it yourself

All CSS combinator selectors

Selector Example Example description
element element div p Select all <p> elements within the <div> element.
element>element div > p Selecteer alle <p> elementen waarvan de ouder een <div> element is.
element+element div + p Selecteer alle <p> elementen die direct na een <div> element volgen.
element1~element2 p ~ ul Selecteer elke <ul> element die een <p> element voorafgaat.

Uitbreidende lectuur

Extra boeken:CSS nakomeling selector

Extra boeken:CSS kind element selector

Extra boeken:CSS naaste broer selector