CSS Tag Matching (Selector) Syntax

Xah Lee, 2010-03-12

This page is a basic tutorial on CSS tag matching syntax.

Common Examples

Matching Standard Tags

Some common examples of setting appearance for common tags.

body {font-family:sans-serif}
h1,h2,h3,h4,h5,h6 {font-family:serif}

p {line-height:130%}
blockquote {color:#00007b}
img {margin-bottom:1px; margin-right:1px}
hr {clear:both}

Matching A Class

/* matches any div of class “xyz”*/
div.xyz {color:red}

/* matches any span of class “b”*/
span.b {font-weight:bold}

Matching a Tag's ID

/* matches any div with id of “xyz”*/
div#xyz {color:red}

Note: a tag's id should be unique on a page. A page cannot have two tags having the same id.

Change Link Rendering

Example of taking out the standard underline in links.

a:link:active {text-decoration:none}
a:link:hover {text-decoration:none}
a:visited:hover {text-decoration:none}
a:visited {text-decoration:none}
a:link {text-decoration:none}

Possible value for “text-decoration” are:

none
underline
overline
line-through
blink
inherit

Multiple Tags A, B, C

If you have multiple tags and want them all to have the same rendering, you can comma to save space. For example, this:

span.x {font-weight:bold}
span.y {font-weight:bold}
span.z {font-weight:bold}

can be written like this:

span.x, span.y, span.z {font-weight:bold}

Matching Tag Inside Tags (Ancestor Offspring)

Sometimes, you want to match a tag only if they are child, grand child, or deeper nested inside another tag. You can use the space to specify this, like this:

div.navbar span.tabA {color:#b22222}
div.navbar span.tabB {color:#bc8f8f}

In the above example, any “span.tabA” inside “div.navbar” will be matched.

Parent > Child

Sometimes you want to match a tag only if they are direct child of a given paren tag. You can use the “>” to specify a parent-child relationship.

Here's a example:

/* computer language source code coloring */
pre > span.comment {color:#b22222}
pre > span.string {color:#bc8f8f}
pre > span.keyword {color:#a020f0}
pre > span.type {color:#228b22}
pre > span.variable-name {color:#b8860b}

In the above example, those “span” tags will match only if their parent is a “pre” tag.

General Syntax

Pattern	Meaning
*	Matches any element.
E	Matches any E element.
E F	Matches any F element that is a descendant of an E element
E > F	Matches any F element that is a (immediate) child of an element E.
E:first-child	Matches element E when E is the first child of its parent.
E:link E:visited E:active E:hover E:focus	Matches links, visited links, or mouse hovers etc..
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).
E + F	Matches any F element immediately preceded by an element E. Adjacent selectors
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.
E[lang\|="en"]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.
DIV.warning	HTML only. The same as DIV[class~="warning"].
E#myid	Matches any E element whose value of ID attribute equal to “myid”.

http://www.w3.org/TR/REC-CSS2/selector.html

✍