CSS Selector Syntax

By Xah Lee. Date: . Last updated: .

Matching Element Structure

CSS Selector for Matching Tags Names
PatternMeaning
*match any tag.
tagmatch any tag.
t1>t2match any t2 that is a direct child (first-level nesting) of t1.
t1 t2match any t2 that is nested (any level) inside t1.
t1+t2match any t2 immediately preceded by t1. (t1 and t2 are siblings, with t1 coming first.)

Note: tag means HTML/XML element's name (the tag name). For example, {body, div, p, span, …}

For 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
PatternMeaning
tag:first-childsame 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-childsame 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
PatternMeaning
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-typesame as tag:nth-of-type(1)
tag:last-of-typesame as tag:first-of-type but the last.
tag:only-of-typematch 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
PatternMeaning
tag:rootmatch tag that is root of document.
tag:only-childmatch tag if it's the only child.
tag:emptymatch tag that has no children. That is, with no inner text
tag:targetmatch tag that is the target of the referring URI.
tag:enabledmatch a user interface tag that is enabled.
tag:disabledmatch a user interface tag that is disabled
tag:checkedmatch 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

CSS Selector for Matching Attribute and Value
PatternMeaning
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
PatternMeaning
tag.valHTML only. Match tag tag that has class val. Same as tag[class~="val"]
tag#valsame as tag[id="val"]

Matching pseudo-classes

Following are for matching “pseudo-classes”.

CSS selector for pseudo-classes
PatternMeaning
a:linka link.
a:visitedvisited link.
a:activea 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
PatternMeaning
tag:hovermouse hover over a element tag
tag:focuswhen 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

thanks to Brennan Young for correction on nth child.

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth