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:

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}

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

PatternMeaning
*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.
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 + 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”.

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

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs