CSS: Selector: Match Parent
Match Root Element (Element with No Parent)
:root-
Match the root element. (no parent)
In HTML, this is the
htmltag. In XML, it may be other. e.g. in SVG, this is thesvgtag[see HTML: the Root Element]
Match a Parent Tag (Child Combinator)
dad > son-
(this is called Child combinator)
Match any son that is a direct child of dad.
Each of expression can be compound selector, e.g.
div.xyz.Can also be sequenced like this:
a > b > c > etc/* 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 (Descendant Combinator)
ancestor son-
(This is called Descendant combinator)
Match any son that is nested inside ancestor at any depth.
Each expression can be compound selector, e.g.
div.xyz.Can also be sequenced like this:
a b c etcCan 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>