How to apply two CSS classes to a single element

html

responsive-design

css

best-practices

byAnton Shumikhin·Jan 8, 2025

To apply multiple CSS classes on one HTML element, simply separate them with a space inside the class attribute. Looking something like this:

<div class="class1 class2"></div>

With this, the div grabs styles from both class1 and class2 like a kid in a candy store, giving you versatility in your styling approach.

Digging deeper: The anatomy of multiple classes

Applying multiple CSS classes to a single HTML element allows us to layer styles creatively and efficiently like a styling lasagna. Each class can be seen as a reusable building block, a bit like Lego pieces for your webpage.

CSS class selectors in action

You can target elements with multiple classes directly in your CSS by combining the class selectors without a space:

/* Will fry chicken for anyone using both class1 and class2 */
.c1.c2 { 
  /* Here you go, style soup */
}

This selector targets only those brave elements carrying both classes.

Classy considerations

Syntax and spelling are your best mates here. A single typo could leave your styles hanging. Also, though it feels like a trip to the 90's, bear in mind that IE6 and older browsers might not support this. So, check your audience's browser usage before committing to this approach.

Pitfall parade and dodging techniques

There may be scenarios where using multiple classes introduces style conflicts. The output would then depend on the order and specificity of styles in your CSS file.

Remember to avoid splitting classes across multiple attributes:

<!-- This is a CSS crime, don't commit it -->
<div class="class1" class="class2"></div>

This could result in unpredictable outcomes - much like pineapple on a pizza.

Responsive design with classes

Multiple classes also grant you a magic carpet for responsive design, allowing you to adapt to different viewport sizes without writing redundant code.