CSS Combinator selectors

CSS Combinators

Note Combinators describe the relationship between two selectors.

CSS combinators include various ways of combining simple selectors.

In CSS3, there are four combination methods:

  • Descendant selector (space) separated)
  • Child selector (greater-than sign)>separated by a sign)
  • Adjacent sibling selector (plus sign)+separated)
  • General sibling selector (tilde)～separated)

Descendant selector

The descendant selector is used to select descendant elements of an element.

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

Example

div p { background-color:yellow; }

Try it Yourself »

Child element selector

Compared to the descendant selector, the child selector (Child selectors) can only select elements that are direct/first-level child elements of an element.

The following example selects all direct child <p> elements of the <div> element:

Example

div>p { background-color:yellow; }

Try it Yourself »

Adjacent sibling selector

The adjacent sibling selector can select an element immediately after another element, and both have the same parent.

If you need to select an element immediately after another element, and both have the same parent, you can use the adjacent sibling selector.

The following example selects the first <p> element after all <div> elements:

Example

div+p { background-color:yellow; }

Try it Yourself »

Subsequent sibling selector

The subsequent sibling selector selects all sibling elements that follow the specified element.

The following example selects all adjacent sibling <p> elements after all <div> elements:

Example

div~p { background-color:yellow; }

Try it Yourself »
other extensions