View video tutorial

CSS Combinators

CSS

Selection is based on relationships between elements.

CSS Combinators


Combinators are used in 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 a particular element.

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

Example

div p {
  background-color: yellow;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


Child Selector

The descendant selector matches all elements that are the children of a particular element.

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

Example

div > p {
  background-color: yellow;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


Adjacent sibling Selector

The descendant selector matches all elements that are adjacent sibling of a particular element.

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

Example

div + p {
  background-color: yellow;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


General sibling Selector

The descendant selector matches all elements that are general sibling of a particular element.

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

Example

div ~ p {
  background-color: yellow;
}
Try it Now »

Click on the "Try it Now" button to see how it works.