How to Use Mutliple Classes in One Element in CSS

1. Assign Multiple Classes to One Element and Style Both Classes at Once in CSS
2. Assign Multiple Classes to One Element and Style Both Classes Individually in CSS

This tutorial will introduce methods to use the multiple classes in one single element in CSS.

Assign Multiple Classes to One Element and Style Both Classes at Once in CSS

In HTML, we use the class attribute to assign the class to an element. We can apply class on all the elements in HTML like p,h1-h6, a, div, and many more. In CSS, we use the class selector . to select the element with the respective class name, and we can apply styles to it. But there are cases when we want to assign multiple elements to a single class and style the classes. In such cases, HTML allows us to assign multiple classes to a single element. We can write multiple class names separated by whitespace in any element. CSS also allows us to style such classes by selecting both classes at once. We can use the . selector to select the first-class and again select the second class without leaving whitespace. Then we can set the styles for the selected classes. We can assign more than two classes to a single element and apply the styles to all the classes at once.

For example, create three p tags in HTML and give them the class names first, second, and first second. Note that for the third class, there remains a whitespace between the class names. Write the texts KTM, Honda and Kawasaki for the three classes between the p tags. Select the class first in CSS and set its color to orange. Likewise, select the class second and set it to red and finally select both the classes as .first.second and set the color as green.

In the example below, we have used multiple classes in a single element and styled those classes at once.

Example Code:

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

Assign Multiple Classes to One Element and Style Both Classes Individually in CSS

We can assign multiple classes to a single HTML element and style both classes individually to write CSS more efficiently. Using this approach, we can control redundancy in the styles applied. We can apply the common styles to multiple classes and apply the unique styles to the specific class.

For example, create a class title in a p tag and write some text. Similarly, create another paragraph tag and assign the multiple classes title text to it. Write some text on the paragraph tag. In CSS, select the title class and set the background-color to skyblue. Then select the text class and give the color of green to it.

Here, the background color of both the paragraphs will be set to skyblue. It is because we have styled the title class to set the background color. And, there is a title class in both paragraphs. However, the second paragraph will only change its color to green because we have applied this style only to the text class. This approach enables us to use multiple classes for a single element to apply the common styles and individual style to the elements. In this way, we can assign multiple classes to a single element and can style the classes individually to write efficient CSS.

Example Code:

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}