CSS: Selector Tutorial

By Xah Lee. Date: . Last updated: .

The following are most common patterns in using CSS. You should memorize them by heart.

Match Tag Names

Some common examples of setting appearance for HTML elements.

body {font-family:sans-serif}

p {line-height:1.5}

blockquote {color:navy}

img {margin:1px}

Match Class Value

/* 
matches any tag of class xyz
<div class="xyz">…</div>
…
*/

.xyz {color:red}

Note: a HTML element can have more than one class.

[see HTML: Multiple Class Attribute Values]

Match Tag Name and Class Value

/* matches any div of class xyz
<div class="xyz">…</div>
*/
div.xyz {color:red}

Match a Tag's ID

/* matches any tag with id of xyz
<div id="xyz"></div>
<span id="xyz"></span>
<p id="xyz"></p>
*/
#xyz {color:red}

Note: a tag's id should be unique on a page. A page cannot have two tags having the same id. A frame [see HTML: Frameset to Split Windows] or iframe [see HTML: Iframe] counts as separate pages.

Change Link Appearance

Example of removing the underline in links.

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

[see CSS: Text Decoration: Underline, Overline, Line-Through]

Multiple Tags A, B, C

If you have multiple tags and want them all to have the same appearance, you can use comma.

For example, this:

span.x, span.y, span.z {color:red}

is equivalent to:

span.x {color:red}
span.y {color:red}
span.z {color:red}

Match Nested Tags (all levels)

Sometimes, you want to match a tag only if it is nested inside another tag (regardless how many levels deep). You can use the space to specify this, like this:

div.abc span.xyz {color:red}

/* 
match any
inside
<div class="abc"></div>
*/

Parent Child Relation (Nested Tags (1st level only))

Sometimes you want to match a tag only if it is a immediate child of a given parent tag. You can use the > to specify a parent-child relationship.

Here is a example:

div > span {color:red}

/* 

In the following HTML code, the CSS code above will match the “upon” but
not “you”.

<div>
once <span>upon</span> a time
<footer>Thank <span>you</span> for reading</footer>
</div>

*/

Complete List of CSS Selector Syntax

CSS Selector Syntax

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc