CSS Selector Syntax

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

thanks to Brennan Young for correction on nth child.

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog