How to Use Multiple CSS Classes on a Single Element

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

CSS coding

E+/Getty Images

Cascading Style Sheets define a webpage element's appearance by hooking into the attributes that you apply to that element. These attributes can be either an ID or a class and, like all attributes, they add helpful information to the elements that they are attached to.

Depending on which attribute you add to an element, you can write a CSS selector to apply the necessary visual styles that are needed to achieve the look and feel for that element and the website as a whole.

While either IDs or classes work for the purpose of hooking into them with CSS rules, modern web design methods favor classes over IDs, in part, because they are less specific and easier to work with overall.

One or More Classes in CSS?

In most cases, you assign a single class attribute to an element, but you actually aren't limited to just one class they way you are with IDs. While an element can only have a single ID attribute, you can give an element several classes and, in some cases, doing so will make your page easier to style and much more flexible.

If you need to assign several classes to an element, 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">This would be the text of the paragraph</p>

This sets the following three classes on the paragraph tag:

  • Pullquote
  • Featured
  • Left

Notice the spaces between each one of these class values. Those spaces are what sets them up as different, individual classes. This is also why class names cannot have spaces in them because doing so would set them as separate classes.

Once you have your class values in HTML, you can then assign these as classes in your CSS and apply the styles you would want to add. For example.

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

In these examples, the CSS declarations and values pairs appear inside the curly braces, which is how those styles would be applied to the appropriate selector.

If you set a class to a specific element (for 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 since your selector is actually saying to apply it to "paragraphs with a class value of left," By contrast, the other two selectors in the example do not specify a certain element, so they would apply to any element that uses those class values.

Advantages of Multiple Classes

Layering several classes can make it easier to add special effects to elements without having to create a whole new style for that element.

For example, to float elements to the left or right, 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 using HTML while style is in CSS. If your HTML document is filled with elements that all have class names like "red" or "left," which are names that dictate how elements should look rather than what they are, you are crossing that line between structure and style. 

Multiple Classes, Semantics, and JavaScript

Another advantage of using several classes is that it increases interactivity possibilities.

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 — add additional classes to define what that element means semantically. This approach is how Microformats works.

Disadvantages of Multiple Classes

The biggest disadvantage of using several simultaneous classes on your elements is that it can make them a bit unwieldy to look at and manage over time. It may become difficult to determine what styles are affecting an element and if any scripts affect it. Many of the frameworks available today, like Bootstrap, make heavy use of elements with multiple classes. That code can get out of hand and hard to work with very quickly if you are not careful.

When you use several classes, you also run the risk of the style for one class overriding the style of another. This collision then can make it difficult to figure out why your styles aren't being applied even when it appears that they should. Remain aware of specificity, even with the attributes applied to that one element.

By using a tool like the Webmaster tools in Google Chrome, you can more easily see how your classes are affecting your styles and avoid this problem of conflicting styles and attributes.