The Class selector

We previously looked at elements selctors, which targets all elements (which normally translates to HTML tags) on a page. If we want to be more specific, class selctors is the next step. Instead of targeting all elements with a specific name, they target all elements that has a specific class name specified.

While this normally makes the list of targets narrower, it does give you the opportunity to target elements of various types (e.g. both bold and italic tags) at the same time - with a class selector, the element type/name is no longer the important part.

A class selector looks just like an element selector, but instead of using names that are tied to the names of HTML elements, you make up the name and then you prefix it with a dot (.). For instance:

• .red { }
• .myElements { }
• .navigation { }

Only elements that uses one or several of these class names are targeted. Allow me to illustrate how this works with an example:

<style type="text/css">  
.red {  
    color: Red;  
}  

.beautiful {  
    font-weight: bold;  
    color: Blue;  
    font-style: italic;  
}  
</style>  

<p class="red">  
    Here's some text - <span class="beautiful">this part is especially pretty!</span>  
</p>

This text is very normal!

Try out the example and see the result for yourself. Notice that two similar paragraph elements now look completely different because we have assigned a class to the first one.

Also notice how I can name the selectors however I want - the two names are actually a great example of bad and good (or at least better) naming conventions. The name "red" is not a good name, because the rule could easily contain more than the color-related rule, or the color could easily be changed in a re-design from red to blue. The latter name is better, because it is more general and doesn't convey a specific color or look.

Element specific classes

In our first example, all element types could use our classes but in some situations, you may want to limit the use to a specific element type. This is usually done to indicate how the class is supposed to be used, to allow for more than one class with the same name and avoid conflicts. Element specific classes are used simply by appending the class name to the element name in your selector, like this:

<style type="text/css">
span.beautiful {
    font-weight: bold;
    color: Blue;
    font-style: italic;
}
</style>

<p>
    Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is especially pretty!</span>
</p>

Try out the example and notice how even though we try to use the beautiful class in two places, it only works for the span element, because we now require this.

Multiple classes

Classes are not unique and the class property of an HTML tag allows you to specify more than one class. The cool thing about this is that it allows you to combine the rules for several selectors and use them for the same tag however you want to.

This also means that instead of writing selectors with many rules and then only targeting few elements, you can write less specific selectors and simply combine them when it is appropriate. This allows for greater re-usability, which is really what CSS is all about.

Have a look at this example:

<style type="text/css">
.status {
    padding: 5px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
}

.error {
    color: Red;
    border-color: Maroon;
}

.information {
    color: Blue;
    border-color: Navy;
}
</style>

<div class="status error">
    This is an error!
</div>

<div class="status information">
    This is information!
</div>

Here we use CSS to show status information. We have a common .status selector and then we have a selector for error messages and one for informational messages. Error and information messages obviously share stuff, since they are both a type of messages, but they also have distinct looks. So, we put the shared stuff in a class called .status, and then put the rest in different classes called .error and .information, and then we use them on the div tags, simply by separating their names with a space.

Without the common .status class, we would have to repeat all the properties for each class, which would be a waste of bandwidth and force us to change stuff in multiple places whenever we wanted thicker borders or something like that.

Summary

As demonstrated, CSS classes are very versatile - they can be as specific or non-specific as you want them to and you can use them for all sorts of element, or not, depending on whether the element references the class or not. This makes classes the most flexible type of selector you can use in CSS. In the next chapter, we'll have a look at the ID selector, which is even more specific.