How to Use Multiple CSS Classes on a Single Element

You're not limited to a single CSS class per element.

CSS coding
Image courtesy E+ / Getty Images

Cascading Style Sheets (CSS) allow you to define an element's appearance by hooking into the attributes that you apply to that element. These attributes can be either and ID or a class. Depending on which attribute you add to an element, you would then write a CSS selector to apply the necessary visual styles. While either IDs or classes work in this regard, modern web design methods favor classes over IDs, in part, because they are less specific and easier to work with overall.

In most cases you assign one class to an element, but you aren't limited to just one class they way you are with IDs. You can absolutely give an element multiple classes and, in some cases, doing so will make your page easier to style.

If you need to assign multiple classes on an element, you can add the additional classes and simply separate them with a space in your attribute.

For example, this paragraph has three classes:

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

This sets the following three classes on the paragraph tag:

  • pullquote
  • featured
  • left

The spaces between each one of these class values is what sets them up as different, individual classes. This is why class names cannot have spaces in them, because doing so would set them as separate classes. For example, if you used "pullquote-featured" without a space, it would be one class value, but the example above, where these two words are separated with a space, sets them as individual values.

Once you have your class values in HTML, you can then assign these as classes in your CSS:

.pullquote { ... }
.featured { ... }
p.left { ... }

If you set a class to a specific element (in this example, p.left), you can still use it as part of a list of classes; however, 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.

There is a fine line to walk here, however. Remember that web standards dictate the separation of style and structure. Structure is handled via HTML while style is in CSS. If your HTML document is filled with elements that all have class names like "red" or "left", names that dictate how they should look rather than what they are, you are crossing that line between structure and style.  I try to limit my non-semantic class names as much as possible for this reason.

Multiple Classes, Semantics, and JavaScript

Another advantage to using multiple classes is that it gives you many more interactivity possibilities.

You can apply new classes to 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 can make them a but unwieldy to look at and manage.. It may become difficult to determine what styles are affecting an element and if any scripts are impacting it.

When you use multiple classes, you run the risk of having the style for one class override the style of another even if you did not intend for this. This then can make it difficult to figure out why your styles aren't being applied even when it appears that they should.

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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 1/4/17