CSS Selector Syntax

Matching Element Structure

CSS Selector for Matching Tags Names

Pattern	Meaning
*	match any tag name. (e.g. div span p img etc) [see HTML5 Tags Complete List]
t	match any tag name t.
t1>t2	match any t2 that is a direct child (first-level nesting) of t1.
t1 t2	match any t2 that is nested (any level) inside t1.
t1+t2	match any t2 immediately preceded by t1. (t1 and t2 are siblings, with t1 coming first.)

For example:

p {color: red;}

<p>this will be colored red</p>

More advanced example:

div > span {color:red}

<div>
once <span>upon</span> a time
<footer>Thank <span>you</span> for reading</footer>
</div>

The code above will match the “upon” but not “you”.

[see CSS: Selector Tutorial]

CSS Selector for Element Structure

Pattern	Meaning
tag:first-child	same as tag:nth-child(1).
tag:nth-child(n)	match tag only if it is nth child element. (counting start at 1. Cannot be negative.)
tag:nth-last-child(n)	counting from bottom, starting at 1.
tag:last-child	same as tag:nth-last-child(1)

Note: these matches the specified tag, only if that tag is the nth child. For example, if you have:

span:first-child {color:red}

<p><b>1</b> <span>2</span></p>

The above code will NOT match, because the “span” is second child.

CSS Selector for Element Structure

Pattern	Meaning
tag:nth-of-type(n)	match tag that is nth child of the same name. Count starts at 1.
tag:nth-last-of-type(n)	same as tag:nth-of-type(n) but counting from bottom.
tag:first-of-type	same as tag:nth-of-type(1)
tag:last-of-type	same as tag:first-of-type but the last.
tag:only-of-type	match tag if its type is unique 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.

CSS Selector for Element Structure

Pattern	Meaning
tag:root	match tag that is root of document.
tag:only-child	match tag if it's the only child.
tag:empty	match tag that has no children. That is, with no inner text
tag:target	match tag that is the target of the referring URI.
tag:enabled	match a user interface tag that is enabled.
tag:disabled	match a user interface tag that is disabled
tag:checked	match a user interface tag which is checked (For example, radio-button, checkbox)
tag:not(s)	match tag if it's that does not match simple selector s.

Matching Attribute and Value

• attr → attribue name. For example, {id, class, href, src, …}
• val → attribue value.

CSS Selector for Matching Attribute and Value

Pattern	Meaning
tag[attr]	match tag, has attribute attr.
tag[attr="val"]	match tag, has attribute attr, value val.
tag[attr^="val"]	match tag, has attribute attr, value begins with val
tag[attr$="val"]	match tag, has attribute attr, value ends with val
tag[attr*="val"]	match tag, has attribute attr, value contains val
tag[attr~="val"]	match tag, has attribute attr, value is a list of space-separated values, one of which is exactly equal to val.
tag[attr|="val"]	match tag, has attribute attr, value is a hyphen-separated list of values beginning (from the left) with val.

Example: color all links to Wikipedia green:

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

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

Shortcuts for Matching Class Value and Id Value

Pattern	Meaning
tag.val	HTML only. Match tag tag that has class val. Same as tag[class~="val"]
tag#val	same as tag[id="val"]

Matching pseudo-classes

Following are for matching “pseudo-classes”.

CSS selector for pseudo-classes

Pattern	Meaning
a:link	a link.
a:visited	visited link.
a:active	a link while clicked but button not yet released.

Example:

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

CSS selector for pseudo-classes

Pattern	Meaning
tag:hover	mouse hover over a element tag
tag:focus	when a element is in focus (receive keys, etc. Click on a element to put focus to it.)
tag:lang(lang)	match tag if it is in (human) language lang. Selectors#lang

Example:

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

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

Reference

• http://www.w3.org/TR/selectors/
• Selectors

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