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 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. Yes, you will still find many sites that use IDs, but those attributes are being applied more sparingly than in the past while classes have taken over modern web pages.

In most cases you would 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 absolutely give an element multiple classes and, in some cases, doing so will make your page easier to style and much more flexible!

If you need to assign multiple classes to 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">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 is 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.

For example, if you used "pullquote-featured-left" without a space, it would be one class value, but the example above, where these three words are separated with a space, sets them as individual values. It is important to understand this concept as you decide on which class values to use on your webpages.

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 would be inside the curly braces, which is how those styles would be applied to the appropriate selector.

Note - 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

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", which are names that dictate how elements 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 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 are impacting 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 multiple classes, you also 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.  You need to be aware of specificity, even with the attributes applied to that one element!

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 of conflicting styles and attributes.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 8/7/17

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Use Multiple CSS Classes on a Single Element." ThoughtCo, Aug. 7, 2017, thoughtco.com/using-multiple-classes-on-single-element-3466930. Kyrnin, Jennifer. (2017, August 7). How to Use Multiple CSS Classes on a Single Element. Retrieved from https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930 Kyrnin, Jennifer. "How to Use Multiple CSS Classes on a Single Element." ThoughtCo. https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930 (accessed September 20, 2017).