CSS Selector: Combinators

A CSS combinator is something that explains the relationship between two selectors.

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 selector (space)

• child selector (>)

• adjacent sibling selector (+)

• general sibling selector (~)

Selector	Example	Example description
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element