CSS: Selector Tutorial

What is CSS Selector

CSS Selector is the CSS syntax that specifies which HTML element to apply to. 〔see HTML Tags Complete List〕

It's easier to think of CSS Selector as Tag Matchers.

This page introduce the most commonly used patterns.

For complete list, start at CSS: Selector: Match Tag Name

Example: Most Commonly Used CSS Selectors

/* most common examples of CSS selector syntax */

/* match any p tag */
p {
color:red;
}

/* match p tag that have class bbb */
p.bbb {
color:red;
}

/* match any tag that have class bbb */
.bbb {
color:red;
}

/* match the tag that has id="bbb". Note, id must be unique per html page */
#bbb {
color:red;
}

/* match p that's direct child of div */
div > p {
color:red;
}

/* match p that's nested in div however deep */
div p {
color:red;
}

/* match span tags that have class bbb */
span.bbb {
color:red;
}

The tag matcher is often just the tag's name, but it can also be specified for tags that have a particular class attribute, or tags with a particular id attribute, and more.

For example, if you have <p class="warning">…</p> for any important paragraph, you can make all such paragraph red by p.warning {color:red}.

CSS is really simple. 90% of CSS can be mastered in just a day. Complete mastery of CSS will usually take a year or more of experience.

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

Match Tag Names (aka Type Selector)

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 (aka Class Selector)

/* matches any tag of class xyz */
.xyz {color:red}

<div class="xyz">abc</div>

Note: a HTML element can have more than one class. 〔see HTML: Class Attribute〕

Match Tag Name and Class Value (aka Compound Selector)

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

<div class="xyz">…</div>

Match a Tag's ID (aka ID Selector)

/* matches any tag with id of xyz */
#xyz {color:red}

<div id="xyz"></div>
<span id="xyz"></span>
<p id="xyz"></p>

Change Link Appearance

Example of removing the underline in links.

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

〔see CSS: Underline, Overline, Line-Through〕

Match Multiple Tags (aka Selector List)

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:

/* 
match any span with class xyz, nested at any depth
inside a span with class xyz
*/
div.abc span.xyz {color:red}

<div class="abc">a <div class="xyz">b</div> c</div>

Match Parent Child Relation

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}