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:
The rule used could then be:
.big { font-size: 110%; font-weight: bold; }
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.
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 */
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; }
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;
}
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 */
Before using a class selector, you should ask yourself:
Class selectors are well supported across standards-compliant browsers.