Bugl — code interview practice that feels like a game

Loading lesson path

A combinator is something that defines the relationship between two or more selectors.

A CSS selector can contain more than one selector. Between the selectors, we can include a combinator, to create a more specific selection.

There are four different combinators in CSS:

Descendant Combinator (space)

The descendant combinator matches all elements that are descendants (children, grandchildren, etc.) of a specified element.

The following example selects all <p> elements inside <div> elements:

Example

Formatted code

div p {
  background-color: yellow;
}

Live preview

The child combinator selects all elements that are direct children of a specified element.

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

Example

Formatted code

div > p {
  background-color: yellow;
}

Live preview

The next sibling combinator is used to select an element that is directly after a specific element.

Sibling elements must have the same parent element.

The following example selects the first <p> element that immediately follows a <div>, and share the same parent:

Example

Formatted code

div + p {
  background-color: yellow;
}

Live preview

The subsequent-sibling combinator selects all elements that are next siblings of a specified element.

The following example selects all <p> elements that are next siblings of <div>, and share the same parent:

Example

Formatted code

div ~ p {
  background-color: yellow;
}

Live preview