CSS: Selector Syntax

Match Attribute

• CSS Attribute Selectors

Match Nested Structure

These allow you to match based on nesting structure.

expr1>expr2

(this is called Child combinator)

Match any expr2 that is a direct child (first-level nesting) of expr1.

Each of the expr can be compound selector, such as with CSS: Attribute Selectors

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

matches

<div>
<span t="x">some</span>
</div>

doesn't match

<div>
<p>
<span t="x">some</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 with CSS: Attribute Selectors

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

matches:

<div>
<p>
<span t="x">some</span>
</p>
</div>

: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]

T:empty

Match T that has no children. That is, with no inner text.

It must not have any inner-text, not even space or newline.

T:only-child

Match T if it's the only child.

T:first-child

Match T only if it is first child element.

/*
Match span only when it is the 1st child.
Note, this is different from “match the 1st span”.
*/
span:first-child {color:red;}

T:nth-child(n)

Match T only if it is nth child element. (counting start at 1. Cannot be negative.)

T:last-child

same as T:nth-last-child(1)

T:nth-last-child(n)

count from right, starting at 1.

Match Child Structure and Tag Name

T:nth-of-type(n)

Match T that is nth sibling of name T. Count starts at 1.

T:nth-last-of-type(n)

same as T:nth-of-type(n) but counting from right.

T:first-of-type

same as T:nth-of-type(1)

T:last-of-type

same as T:first-of-type but the last.

T:only-of-type

Match T if it is the only type (tag name) among siblings.

span:only-of-type {color:red;}

<div>
 <div>11</div>
 <span>22</span>
 <span>33</span>
</div>
<div>
 <div>AA</div>
 <span>BB</span>
 <div>CC</div>
</div>

In the above example, only the BB will be colored, because that span is the only span tag among siblings.

Match Sibling Structure

These allow you to match based on elements based on sibling relationship.

expr1+expr2

(this is called Next-sibling combinator)

Match any expr2 immediately preceded by expr1. (expr1 and expr2 are siblings, with expr1 coming first.)

Each of the expr can be compound selector, such as with CSS: Attribute Selectors

span+b {color:red;}

matches the B:

<div>
<span>A</span>
<b>B</b>
</div>

expr1~expr2

(this is called Subsequent-sibling combinator)

Match any expr2 that is a sibling of expr1 and comes after expr1.

Each of the expr can be compound selector, such as with CSS: Attribute Selectors

Negation

T:not(T2)

Match element with tag name T if it does not match tag T2.

/* match p, only if it is not class x */
p:not([class="x"]) {
color:red;
}

Grouping Selectors (syntax shortcut)

This allows you to specify multiple selectors together.

expr1, expr2 etc

Match any selector expression expr1, expr2, expr3 etc.

Each of the expr can be compound selector, such as with CSS: Attribute Selectors

/* 
make red of all div of class x, or any span:
*/
div.x, span {color:red;}

/* same as */

div.x {color:red;}
span {color:red;}

Pseudo-Class Selectors

• Pseudo-Class Selectors

T.warning

an T element belonging to the class warning (the document language specifies how class is determined)