CSS Tag Matching Tutorial

Perm url with updates: http://xahlee.org/js/css_tag_matching.html

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:


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}

Parent > Child

Sometimes you want to match a tag only if they are inside other 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 they are inside a “pre” tag.

General Syntax

*Matches any element.
EMatches any E element.
E FMatches any F element that is a descendant of an E element
E > FMatches any F element that is a (immediate) child of an element E.
E:first-childMatches element E when E is the first child of its parent.
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 + FMatches 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.warningHTML only. The same as DIV[class~="warning"].
E#myidMatches any E element whose value of ID attribute equal to “myid”.


Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs