CSS: Selector Tutorial

By Xah Lee. Date: . Last updated: .

Most Common CSS Tag-Matching Patterns

/* most common examples of CSS selector syntax */

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

/* match p tag that have class="xyz" */
p.xyz { color:red}

/* match any tag that have class="xyz" */
.xyz { color:red}

/* match the tag that has id="xyz". Note, id must be unique per html page */
#xyz { 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="booktitle" */
span.booktitle { 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

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 */
.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

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

Match a Tag's ID

/* 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: Text Decoration: Underline, Overline, Line-Through]

Match Multiple Tags

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}

CSS Selectors

CSS Basics