CSS Tag Matching Tutorial

This page is a basic tutorial on CSS tag matching syntax. For a complete list, see: CSS 2.1 and CSS 3 Selector Syntax.

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:navy}
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 Appearance

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 appearance, 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 Nested Tags (Ancestor Offspring)

Sometimes, you want to match a tag only if they are 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 parent 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.

CSS 2.1 and CSS 3 Selector Syntax

Complete list: CSS 2.1 and CSS 3 Selector Syntax.