« Previous Next »

CSS Combinators

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 combinator (space)
  • Child combinator (>)
  • Next sibling combinator (+)
  • Subsequent-sibling combinator (~)

Descendant Combinator

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

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

Output :

Child Combinator (>)

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

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

Output :

Next Sibling Combinator (+)

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

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The following example selects the first <p> element that is placed immediately after <div> elements:

Output 3:

Subsequent-sibling Combinator ( ~ )

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> elements:

Output :

A complete and final example that demonstrates all four CSS combinators — descendant, child, next sibling, and subsequent sibling — in one organized, functional HTML page.

Output:-:
« Previous Next »