Combinators

Published Jun 9, 2022Updated Jun 10, 2022
Contribute to Docs

Combinators are CSS selectors that are used to style elements that have a certain relationship with other selected elements.

Syntax

selector1 selector2 ... selectorN {
  /* declarations here */
}

selector1 > selector2 ... > selectorN {
  /* declarations here */
}

selector1 + selector2 ... + selectorN {
  /* declarations here */
}

selector1 ~ selector2 ... ~ selectorN {
  /* declarations here */
}
  • The space selector ( ) matches all descendants of a specified element.
  • The child selector (>) matches all children of a specified element.
  • The adjacent sibling selector (+) matches all elements directly after the preceding element.
  • The general sibling selector (~) matches all elements that are next to the preceding element.

Example

The example below shows how these combinators can be used:

div p {
background-color: blue;
color: #fff;
}
div > p {
background-color: blue;
color: #fff;
}
h3 + p {
background-color: blue;
color: #fff;
}
h3 ~ p {
background-color: blue;
color: #fff;
}

The rendered output may look like this:

Rendered CSS combinators

All contributors

Looking to contribute?

Learn CSS on Codecademy