CSS Combinators

CSS Combinators

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

Example 1: Descendant Selector

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

Example 2: Child Selector (>)

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

Example 3: Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element.

Example 4: General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.

div p {
  background-color: yellow;
}

div > p {
  background-color: yellow;
}

div + p {
  background-color: yellow;
}

div ~ p {
  background-color: yellow;
}