Class selectors

Introduction

While type selectors target every instance of an element, class selectors can be used to select any HTML element that has a class attribute, regardless of their position in the document tree.

For example, if you want to target the first paragraph and first list items on a page to make them stand out, you could mark up the page in the following way:

<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>

The tree diagram would be:

document tree diagram showing classes

The rule used could then be:

.big { font-size: 110%; font-weight: bold; }

Combining class and type selectors

If you want to be more specific, you can use class and type selectors together. Any type selectors can be used.

div.big { color: blue; }
td.big { color: yellow; }
label.big { color: green; }
form.big { color: red; }

For example, you may want to target the first paragraph and first list items on a page to give them a larger font size. You may also want only the paragraph to be bold.

document tree diagram showing different uses of classes

To do this, you could use the following rules:

.big { font-size: 110%; } /* affects p and li */
p.big { font-weight: bold; }/* affects p only */

Combining multiple classes

Perhaps the most powerful aspect of class selectors is that multiple classes can be applied to one HTML element. For example, you may wish to use two rules on one particular element like this:

<p class="big indent">

.big { font-weight: bold; }
.indent { padding-left: 2em; }

Classes should not replace HTML elements

As you can see from the examples above, class selectors are very powerful. However, it is not advisable to use a class to style HTML elements to look like other elements.

One example of this would be styling the contents of a <div> or a <p> element to look like a heading.

<div class="heading">Heading here</div>

.heading
{
font-weight: bold;
font-size: 140%;
color: #600;
}

The problem with the example above is that some browsers may not recognise style sheets or may have style sheets turned off when they view your page. So, the styled <div> or <p> may not look like a heading at all. Structurally, you should use the correct HTML elements where possible and style them according to your needs.

A preferred method would be to use:

<h2>Heading here</h2>

h2
{
font-weight: bold; /* should not really be required */
font-size: 140%;
color: #600;
}

Or, if you need a specific heading style for one area of your page:

<h2 class="sidenav">Heading here</h2>

h2.sidenav
{
font-weight: bold;
font-size: 140%;
color: #600;
}

Less class

Class selectors can also be overused. For example, you may need to style a range of elements within a <div>. All elements within the <div> could be styled using one class applied to the <div>. You should try to avoid unnecessary markup like this:

<div class="sidenav">
<h2 class="sideheading">Site navigation></h2>
<ul class="sidelist">
<li class="sideitem">List item</li>
<li class="sideitem"><a href="#"><span class="sidelink">List item</span></a></li>
<li class="sideitem">List item</li>
</ul>
</div>

Instead, you could style all the elements within the <div> using one class like this:

<div class="sidenav">
<h2>Site navigation</h2>
<ul>
<li>List item</li>
<li><a href="#">List item</a></li>
<li>List item</li>
</ul>
</div>

With one class in place, you can target any element inside the <div>. The examples below use a combination of class selectors and type selectors. When added together they become descendant selectors.

div.sidenav { blah } /* styles overall div */
div.sidenav h2 { blah } /* styles h2 within the div */
div.sidenav ul { blah } /* styles ul within the div */
div.sidenav li { blah } /* styles li within the div */
div.sidenav li a { blah } /* styles a within li within the div */

Think before you class

Before using a class selector, you should ask yourself:

  1. Is there an existing HTML element that could be used instead?
  2. Is there a class or id further up the document tree that could be used?

Class selectors are well supported across standards-compliant browsers.

Further information

ID selectors »

Other Max Design articles and presentations
Associated with webstandardsgroup.org