1. Technology

How to Use Multiple CSS Classes on a Single Element

Multiple Classes Give You More Flexibility


Image courtesy E+ / Getty Images

Cascading Style Sheets (CSS) allows you to define elements with classes to provide additional information about that element, give it different styles, and connect with it via JavaScript. And you don’t have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example, this paragraph has three classes:

<p class="pullquote btmmargin left">...</p>

This sets the following three classes on the paragraph tag:

  • pullquote
  • btmmargin
  • left

You can then assign these as classes in your CSS:

.pullquote { ... }
.btmmargin { ... }
p.left { ... }

If you set the class to a specific element (i.e. p.left), you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS. In other words, the p.left style will only apply to paragraphs with this class.

Advantages of Multiple Classes

Multiple classes can make it easier to add special effects to elements without having to create a whole new style for that element. For example, you may want to have the ability to float elements to the left or right quickly. You might write two classes left and right with just float:left; and float:right; in them. Then whenever you had an element you need to float left you would simply add the class "left" to its class list.

I like to use multiple classes for things that I want to keep standard across the entire site. For example, if I always want the bottom-margin for elements that have a bottom-margin to be 10px. By creating a class that only encompasses the botom-margin:10px; I can add it wherever it’s needed.

Multiple Classes, Semantics, and JavaScript

Another advantage to using multiple classes is that it gives you many more interactivity possibilities. You can add new classes onto existing elements using JavaScript without removing any of the initial classes. You can also use classes to define the semantics of an element. This means you can add on additional classes to define what that element means semantically. This is how Microformats works.

Disadvantages of Multiple Classes

The biggest disadvantage to using multiple classes on your elements is that it makes them very complicated. This can make it hard to determine what styles are applying to the element as well as any scripts that impact it.

When you use multiple classes you run the risk of having the styles for one class override the style for another. This then can make it difficult to figure out why your styles aren't applying even when they should be. By using a tool like the Webmaster tools in Chrome you can more easily see how your classes are affecting your styles and avoid this problem.

  1. About.com
  2. Technology
  3. Web Design / HTML
  4. CSS
  5. How to Use Multiple CSS Classes on a Single Element

©2014 About.com. All rights reserved.