Combinators

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

Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn CSS on Codecademy