CSS: Selector: Match Parent

By Xah Lee. Date: . Last updated: .

Match a Parent Tag (aka Child Combinator)

aaa > bbb

Match any bbb that is a direct child of aaa.

Each of expression can be compound selector, e.g. div.xyz.

Can also be sequenced like this:

a > b > c

/* any span that's direct child of div */
div > span {color:red;}
<div>
 <span>match</span>
</div>

<div>
 <p>
  <span>no</span>
 </p>
</div>

Match Ancestor Tag (aka Descendant Combinator)

aaa bbb

Match any bbb that is nested inside aaa at any depth.

Each expression can be compound selector, e.g. div.xyz.

Can also be sequenced like this:

a b c

Can also be combined with Child Combinator syntax.

/* any span that's nested in div */
div span {color:red;}
<div>
 <p>
  <span>match</span>
 </p>
</div>

CSS, Selectors