How to target an element with multiple classes in CSS

Most web developers know that you can apply multiple classes to an element in the form of a space-separated list:

<div class="comment author">...</div>

and then style the element with CSS based on either of those classes :

.comment { border: 2px solid #000; background: #F7F7F7; }
.author { border: 2px solid #F00; }

But what developers often don’t know, is how to target an element containing more than one classnot elements which contain only one of the classes, but only elements which contain all of the classes. So in this article, I’ll show you how to target an element which contains both (class X AND class Y), not just (class X OR class Y).

Class selectors

There are different ways to string together class names in CSS, so let’s take a look at the different ‘sentences’ you can construct in your CSS using only class selectors, commas and spaces, which result in different elements being targeted :

All elements with a specific class

To target any/all elements which have a certain class, you do the following:

.XX { ... }

This would, for instance, target both the h1 and span in the following example :

<h1 class="XX">
    Heading
</h1>
<span class="XX">
    Span
</span>

One type of element with a specific class

To target only a certain type of element which has a certain class, you do this:

h1.XX { ... }

This would target only the h1 tag in the example below :

<h1 class="XX">
    Heading
</h1>
<span class="XX">
    Span
</span>

Note that there’s no space between the element, the class selector (the period/dot/full stop) and the class name.

All elements containing class XX OR class YY OR …

To apply a set of styles to a number of classes at once, you separate the list of classes with commas. You are then applying those styles to all elements which contain one (or more) of those classes. What you’re then saying is that if an element has class XX OR class YY anywhere in their list of classes, apply the following styles. It’s better explained through an example :

.XX,.YY { ... }

The styles would then be applied to all three elements in the example below :

<h1 class="XX">
    Heading
</h1>
<span class="YY">
    Span
</span>
<p class="XX YY">
    Paragraph
</p>

You’re allowed to have whitespace between the comma and the start of the next class name, it doesn’t affect the targeting, and is often preferred as it aids readability:

.XX, 
.YY { ... }

All descendant elements

If you’d like to target a class (actually an element with a class) which occurs as a descendant of another class, you do it in the following way:

.XX .YY { ... }

The styles would then be applied to only the span in the following example, not the p :

<h1 class="XX">
    Heading
    <span class="YY">Span</span>
</h1>
<p class="YY">Paragraph</p>

In other words, you’re targeting a class which falls anywhere below another class in the DOM tree — not just direct children, but descendants on any level below. Note the space between the class names and the next class selector!

All elements containing class XX AND class YY AND …

Now to apply a set of styles only to elements which contain all of a number of classes, not just one of them, is what this article is really about. The way to do this, is by stringing together the classes :

.XX.YY { ... }

The styles would then only be applied to the p in the following example :

<h1 class="XX">
    Heading
</h1>
<span class="YY">
    Span
</span>
<p class="XX YY">
    Paragraph
</p>

Note that with whitespace between class names and class selectors, you’ll be selecting descendants. So do not have any whitespace if you’re trying to select an element specifically containing multiple classes.

Example

Here’s an example of this syntax being used in a modern browser:

The code used in the example looks like this:

.one     { background: yellow; }
.two     { background: YellowGreen; }
.one.two { background: DeepSkyBlue ; }

Internet Explorer 6

Yup, you guessed it, IE6 doesn’t support this AND style of targeting elements. What IE6 does is treat .one.two as only .two, so in the code used for the example above, IE6 actually sees it like this:

.one { background: yellow; }
.two { background: YellowGreen; }
.two { background: DeepSkyBlue ; }

and so the example then renders as follows in IE6:

As you can see, the second declaration then overrides the style we previously gave to the second box. You can view the example here.

Combine and extend

The examples used in this article are pretty basic, and you’ll probably want to combine the different techniques to target elements more specifically in your websites, such as :

.single-blogpost p.info, .single-blogpost .comment.author { ... }

That’s it. I hope it aids your development, and encourages you to use CSS in a more object-oriented way!

4 Responses to “How to target an element with multiple classes in CSS”

  1. steve wasiura says:

    thanks! i just came across this in the Zurb Foundation CSS framework, and your blog post explained it perfectly!

  2. todd says:

    surprised their arent more comments, this is well done.

  3. ben says:

    Thanks for this. I found this through google and it worked exactly how i wanted it to.

  4. Ian says:

    Even thought this article is 2 years old, it is still useful. Thanks.

Leave a Reply