CSS: Selector Tutorial

By Xah Lee. Date: . Last updated: .

Most Common CSS 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
<div class="xyz">…</div>
…
*/

.xyz {color:red}

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 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 HTML: Iframe counts as separate page.

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 span nested at any depth
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>

*/

CSS Selectors (Syntax to Match HTML Elements)


CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc