CSS Combinators — CSS | Digital Assets

A combinator is a sign that explains the relationship between selectors.

The table below shows the different combinators in CSS:

Name	Sign	Example	Example Result
Child combinator	>	div > p	Selects every `<p>` element that are direct children of a `<div>` element
Descendant combinator	(single space)	div p	Selects all `<p>` elements inside `<div>` elements
Namespace separator	\		ns \	h2	Selects all `<h2>` elements in namespace ns
Next-sibling combinator	+	div + p	Selects the first `<p>` element that is placed immediately after `<div>` elements
Selector list	,	div, p	Selects all `<div>` elements and all `<p>` elements
Subsequent-sibling combinator	~	p ~ ul	Selects all `<ul>` elements that are preceded by a `<p>` element