CSS Selector Syntax

*

match any element. (e.g. div span p img etc) [see HTML5 Tags Complete List]

e

match any element named e.

e1>e2

match any e2 that is a direct child (first-level nesting) of e1.

e1 e2

match any e2 that is nested (any level) inside e1.

e1+e2

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

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).

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.

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 (e.g. radio-button, checkbox)

e:not(s)

match e if it does not match simple selector s.

e[a]

match e that has attribute a. Example of attributes: {id, class, href}.

e[a="v"]

match e, has attribute a, value v.

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

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

a:link

match a link.

a:visited

match visited link.

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.

Examples

Match Element

Make all paragraphs red.

p {color: red;}

<p>yes</p>

Match Direct Child

div > span {color:red}

<div>
 <span>A</span>
 <span>B</span>
 <div>
  <span>C</span>
 </div>
</div>

The code above will match A and B but not C.

[see CSS: Selector Tutorial]

Match Nth Child

Match “span” only when it is 1st child.

(Note, this is different from “match the 1st span”)

span:first-child {color:red}

This will not watch any span in the following:

<p>
<b>A</b>
<span>B</span>
<span>C</span>
</p>

Match Nth Type

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 Attribute and Value

Color all links to Wikipedia green.

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

<a href="http://en.wikipedia.org/wiki/math">math</a>

Match pseudo-classes

Make link to have underline only when mouse hovers over it.

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

Match pseudo-classes

/* make Chinese paragraphs red */
p:lang(zh) {color:red}

<p lang="zh">天下</p>

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