CSS: Selector: Match Relation to Parent

Match by Checking Parent

Match based on its relation to parent.

:root

Match the root element. (no parent)

In HTML, this is the html tag. In XML, it may be other. e.g. in SVG, this is the svg tag

[see HTML: the Root Element]

expr1 > expr2

(this is called Child combinator)

Match any expr2 that is a direct child of expr1.

Each of the expr can be compound selector, such as CSS: Selector: Match Attribute Name or Value

can also be sequenced like this:

expr1 > expr2 > expr3 > etc

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

<div>
<span>match</span>
</div>

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

expr1 expr2

(This is called Descendant combinator)

Match any expr2 that is nested inside expr1 at any level.

Each of the expr can be compound selector, such as CSS: Selector: Match Attribute Name or Value

/* make red any span that's nested in div */
div span {color:red;}

<div>
<p>
<span>match</span>
</p>
</div>