CSS Combinator Reference Manual

CSS Combinators

A combinator is a symbol used to explain the relationship between selectors.

The following table shows different combinators in CSS:

Name Symbol Example Example description
Child combinator > div > p Select all <p> elements that are direct children of a <div> element.
Descendant combinator （single space） div p Select all <p> elements inside a <div> element.
Namespace separator | ns | h2 Select all <h2> elements in the namespace ns.
Adjacent sibling combinator + div + p Select the first <p> element immediately following a <div> element.
Selector list , div, p Select all <div> elements and all <p> elements.
Subsequent Sibling Combinator ~ p ~ ul Select all <ul> elements that precede <p> elements.