CSS Selector Syntax

By Xah Lee. Date: . Last updated: .
*
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;}

thanks to Brennan Young for correction on nth child.

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc