CSS Selector Syntax

*

Match any element. [see HTML Tags Complete List]
Example: Make everything red.

* {color:red;}

e

Match any element named e.
Example: Make all paragraphs red.

p {color:red;}

e1>e2

Match any e2 that is a direct child (first-level nesting) of e1.
Example: make red of span that's direct child of div.

div > span {color:red;}

e1 e2

Match any e2 that is nested (any level) inside e1.
Example: make red any span that's nested in div.

div span {color:red;}

e1+e2

Match any e2 immediately preceded by e1. (e1 and e2 are siblings, with e1 coming first.)

expr1, expr2 etc

Match any selector expression expr1, expr2, expr3 etc.
Example: make red of all div of class x, or any span.

div.x, span {color:red;}

e[a]

Match e that has attribute a.
Example: match div that has class.

div[class] {color:red;}

e[a="v"]

Match e, has attribute a, value v.
Example: match p that has class of xyz.

p[class="xyz"] {color:red;}

e[a^="v"]

Match e, has attribute a, value begins with v.

e[a$="v"]

Match e, has attribute a, value ends with v.

e[a*="v"]

Match e, has attribute a, value contains v.
Example: Color all links to Wikipedia red.

a[href*="wikipedia.org/"] {color:red;}

e[a~="v"]

Match e, has attribute a, value is a list of space-separated values, one of which is exactly equal to v.

e[a|="v"]

Match e, has attribute a, value is a hyphen-separated list of values beginning (from the left) with v.

e.v

HTML only. Match element e that has class v. Same as e[class~="v"]

e#v

same as e[id="v"]

e:nth-child(n)

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

e:nth-last-child(n)

count from right, starting at 1.

e:first-child

same as e:nth-child(1).
Example:

span:first-child {color:red;}

Match “span” only when it is the 1st child. (Note, this is different from “match the 1st span”)

e:last-child

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

e:nth-of-type(n)

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

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

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

e:first-of-type

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

e:last-of-type

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

e:root

Match e that is root of document.

e:only-of-type

Match e if it is the only type (tag name) among siblings. Example:

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.

e:only-child

Match e if it's the only child.

e:empty

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

e:target

Match e that has a id value same as the current URL #fragment.

e:enabled

Match a user interface e that is enabled.

e:disabled

Match a user interface e that is disabled

e:checked

Match a user interface e which is checked (example: radio-button, checkbox)

e:not(s)

Match e if it does not match simple selector s.

a:link

Match a link.

a:visited

Match visited link.
Example: Make link to have underline only when mouse hovers over it.

a:visited, a:link {text-decoration:none}
a:hover {text-decoration:underline;}

a:active

Match a link that's clicked on but mouse button not yet released.

e:hover

mouse hover over a element e

e:focus

when a element is in focus (receive keys, etc. Click on a element to put focus to it.)

e:lang(v)

Match e if its value of lang attribute is v.
Example: make Chinese paragraphs red.

p:lang(zh) {color:red;}

2013-08-18 thanks to Brennan Young for correction on nth child.