Bugl — Daily coding puzzles and drills

CSS Combinators

A combinator is a sign that explains the relationship between selectors. The table below shows the different combinators in CSS:

>

Formula

div > p
Selects every < p > element that are direct children of a < div > element

(single space) div p

Formula

Selects all < p > elements inside < div > elements

| ns | h2

Formula

Selects all < h2 > elements in namespace ns

+

Formula

div + p
Selects the first < p > element that is placed immediately after < div > elements

Selector list, div, p

Formula

Selects all < div > elements and all < p > elements

~ p ~ ul

Formula

Selects all < ul > elements that are preceded by a < p > element