Using multiple classes within selectors

Some basic definitions to start…

Before we get into using multiple classes, here are a few basic definitions.

HTML Elements

HTML Elements are the basic components that are used to create the structure of an HTML document. HTML elements generally consist of three parts: a start tag, content and an end tag. For example:

<p>
 This is a paragraph.
</p>

HTML Attributes

HTML Attributes are used to assign additional properties to HTML elements. For example:

<p class="intro">
 This is a paragraph.
</p>

CSS Selectors

CSS Selectors are a component of CSS rule sets. They are used to "select" the elements on an HTML page that is to be styled. For example:

.intro
{
 color: red;
}

Multiple classes within one attribute

It is possible to add more than one class to an HTML element. For example, you can add two classes to an <li> element like this:

<li class="page-1 current-page"><a href="#">Home</a></li>

The two classes are written within the same attribute, with spaces separating each class.

The advantage of multiple classes is that you can write a CSS rule to select either of the classes – and they both affect the same element. For example:

.page-1
{
 color: white;
}

.current-page
{
 background: red;
}

You can also use multiple classes in the same selector. To do this, all classes must be written directly after each another – with no white space. For example:

.page-1.current-page
{
 background: purple;
}

Why would you use multiple class selectors?

There may be times when you want to write a CSS rule that is more specific or has more weight than a previously written rule. If no other ids or classes are available further up the document tree you may have to resort to using classes that have been assigned to the same element. Creating a multiple class selector may make the selector more specific or give it additional weight. This means it will overwrite less specific selectors.

Support for multiple class selectors?

Most browsers, excluding Win/IE5 and Win/IE6 support multiple class selectors.

Browser support chart

Mac: Safari 4.0	supported
Mac: Chrome 5.0	supported
Mac: FireFox 3.6	supported
Mac: Opera 10	supported
Win: FireFox 3.6	supported
Win: Opera 10	supported
Win: IE6	NOT SUPPORTED
Win: IE7	supported
Win: IE8	supported

Multiple selectors in action

Here is a simple tabbed menu:

The HTML for this menu could be something like this:

<ul class="topnav">
 <li class="page-1 current-page"><a href="#">Home</a></li>
 <li class="page-2"><a href="#">About us</a></li>
 <li class="page-3"><a href="#">Services</a></li>
 <li class="page-4"><a href="#">Portfolio</a></li>
 <li class="page-5"><a href="#">Contact</a></li>
</ul>

This HTML has been generated by a Content Management System and cannot be changed. We have to find ways of using the available classes to style the list. To achieve the design shown above, we may need to use multiple class selectors.

Let’s take a look at how selectors can be used to target aspects of the list.

Selecting the <a> elements

You could use a selector for all <a> elements, such as:

.topnav li a { }

That would select all these elements:

Selecting the first <a> element

To add a curve to the top left corner of the list, you will need to select the first<a> element. This can be achieved using a selector like this:

.topnav li.page-1 a { }

This would select the first <a> element only:

Selecting the last <a> element

To add a curve to the top right corner of the list, you will need to select the last<a> element, using a selector like this:

.topnav li.page-5 a { }

This would select the last <a> element only:

Highlighting the current page

To change the tab colours to show that the pages are “current” we can use the “current-page” class in a selector like this:

.topnav li.current-page a { }

This will select each tab when the “current-page” class is written by the CMS, like this:

Styling the current page top left and right corners

Now we have a problem. The first and last tabs (“Home” and “Contact”) have square top corners when the “current-page” class is used. Ideally, their “current-page” look should be red, but with a curved corner. To do this, we have to write selectors that are specific to these elements. As we only have classes within the same element to use, we can finally use multiple class selectors such as:

.topnav .page-1.current-page a { }
.topnav .page-5.current-page a { }

We can then use these two specific selectors to add curved red background images into the elements.

The results will then look like this:

Issues

It seems too easy, doesn’t it? The problem, as mentioned above, is that Internet Explorer 5 and 6 do not support multiple class selectors. Instead of reading the two classes, Internet Explorer 5 and 6 will read the last class only. So, instead of seeing this:

.topnav .page-1.current-page a { }
.topnav .page-5.current-page a { }

Internet Explorer 5 and 6 interpret these selectors as:

.topnav .current-page a { }
.topnav .current-page a { }

This means that these browsers could add curved tops to EVERY element classed with “current-page” – like this:

This issue is not a problem for Internet Explorer 7, which supports multiple class selectors.

There are ways to work around the Internet Explorer 5 and 6 issue. One method is explained in the tutorial below.

A step-by-step tutorial

Here is a “step-by-step” tutorial showing how the menu was styled, and how to work around Internet Explorer 5 and 6.

The HTML markup

<ul class="topnav">
 <li class="page-1 current-page"><a href="#">Home</a></li>
 <li class="page-2"><a href="#">About us</a></li>
 <li class="page-3"><a href="#">Services</a></li>
 <li class="page-4"><a href="#">Portfolio</a></li>
 <li class="page-5"><a href="#">Contact</a></li>
</ul>

The unstyled list looks like this:

Time to start styling!

Step 1 – styling the <ul> element

The first step is to remove all default margins and padding from the <ul>element. This can be achieved using:

ul.topnav
{
 margin: 0;
 padding: 0;
}

The list now looks like this. The bullets are still present, but they sit off the left side of the screen now that the left margins have been removed:

Step 2 – styling the <li> element

The next step is to get the <li> elements to sit in a line rather than as new lines. We also need to remove the default bullets. This can be achieved using:

.topnav li
{
 list-style-type: none;
 display: inline;
}

The list items are now sitting beside each other:

Step 3 – Styling the <a> element

Now to style the <a> elements – this is where most of the action takes place. First, we need to float the <a> elements so they sit beside each other. We also need to set them to “display: block” so we can given them some dimention. (Inline elements cannot be given width or height, and padding really only affects the sides of the element.)

Then we add some padding and a background image. The image is a tall narrow one, so we can set it to repeat along the x (or horizontal) axis. A background colour is also included in case people have images turned off. The color also matches the bottom of the background image tint – so the tab will always scale well, no matter how large the text is.

To add a single pixel line between each tab, we can set a margin on the right using the shorthand margin property – “margin: 0 1px 0 0;“.

Finally, we can centre the text, set it to white and take off the default underline using “text-decoration: none;”.

.topnav li a
{
 float: left;
 display: block;
 padding: 3px 10px;
 background: #016fac url(bg-topnav.jpg) repeat-x;
 margin: 0 1px 0 0;
 text-align: center;
 text-decoration: none;
 color: #fff;
}

The background image I have used looks like this:

The background is now working across all <a> elements:

Step 4 – Styling the :hover pseudo-class

Next, we can add a simple hover colour to the <a> element using:

.topnav li a:hover
{
 color: yellow;
}

Now the basic styling is done. As you can see, the only problem is that the top left and right corners are still square.

Step 5 – styling the top left curved corner

To create the top left corner we need to select the first list item (which has a class of “page-1″) and apply a new background image. This time it is set to “no-repeat”. The rule set is:

.topnav li.page-1 a
{
 background: #016fac url(bg-topnav-left.jpg) no-repeat;
}

The background image looks like this:

The top left corner is now a curve:

Step 6 – styling the top right curved corner

We can do the same for the top right corner, except we need to make sure the image always sits in the top right corner of the element. This is achieved by setting the background position to “100% 0″.

.topnav li.page-5 a
{
 background: #016fac url(bg-topnav-right.jpg) no-repeat 100% 0;
}

The background image looks like this:

The top right corner is now a curve:

Step 7 – setting the current page color

Now, to style the current page, we can change the background image and color from blue to red.

.topnav li.current-page a
{
 background: #aa0201 url(bg-topnav2.jpg) repeat-x;
}

The background image looks like this:

The current page will now have a red tab:

Step 8 – applying a current page color to the top left corner

This is where the job gets more interesting. Current pages are given a new class that is written into the same attribute as the identifying class. So, we have an attribute that looks like this:

<li class="page-1 current-page"><a href="#">Home</a></li>

To style the item with a class of “page-1″ but only when it has a second class of “current-page” we need to use a multiple class selector – with both classes written after the type selector – and no spaces between them:

.topnav li.page-1.current-page a
{
 background: #aa0201 url(bg-topnav-left2.jpg) no-repeat;
}

The background image looks like this:

The top left corner has a round corner when current:

The only problem with this elegant solution is that it is not supported in IE5 or IE6, so we will need to create a work-around. But first, we need to finish off by setting the top right corner.

Step 9 – applying a current page color to the top right corner

The same type of selector can be applied to the top right corner:

.topnav li.page-5.current-page a
{
 background: #aa0201 url(bg-topnav-right2.jpg) no-repeat 100% 0;
}

The background image looks like this:

The top right corner now has a round corner when current:

Step 10 – a work-around for IE5 and IE6

Internet Explorer 5 and 6 do not read multiple class selectors correctly. They will apply only the last class that was written. So, a selector like this – “li.page-5.current-page” will be interpreted as this – “li.current-page“.

This presents us with a problem as this means EVERY current page tab will be given a curved edge, as you can see in this example:

If this is a problem, it may be better to let IE render all the current page tabs without corners. This can be achieved by giving IE5 and IE6 a specific rule – one that no other browsers see.

How is this achieved? The simplest way is to place a new rule in a separate style sheet that is linked to via a conditional comment.

Conditional comments allow us to show CSS rules to specific versions of Internet Explorer. In this case we will use a conditional comment to show a new CSS file to all version of Internet Explorer except IE7. This is achieved using “if lt IE 7“, which means “if less than IE7″.

<!--[if lt IE 7]>
 <link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

Inside this new style sheet, a new rule can be written that will place a non-curved background image into every tab.

.topnav li.current-page a { background: #aa0201 url(bg-topnav2.jpg) repeat-x; }

Not ideal, but one solution that can be used without having to write specific ids for the various <li> elements.

A final word – using CSS3

Of course, we will soon be able to target elements much more easily using CSS3 selectors. For example, if we wanted to target the first and last elements in a list we could simply use these selectors:

li:first-of-type a { }
li:last-of-type a { }