Open In App

How to apply two CSS classes to a single element ?

Improve
Improve
Like Article
Like
Save
Share
Report

Multiple classes can be applied to a single element in HTML and they can be styled using CSS. In this article, we will stick to only two classes. But the concepts used in assigning two classes can be extended to multiple classes as well.

Assigning classes to an element in HTML: The names of the classes can be written within the “class” attribute

Note: The names of the classes must be space-separated.

Syntax: 

<tag_name class="class_1 class_2">

Then the classes can be either styled individually using “.class_1” and “.class_2” or that element could be styled only that contains both of the classes using “.class_1.class_2“.

Styling Individually: Both of the classes in the following example are styled individually.

Syntax:  

<style>
    .class_1{
        /* some styles */
    }
  
    .class_2{
        /* some styles */
    }
</style>

Example: In this example, we will apply two CSS classes to a single element in HTML.

html




<style>
    .para {
        font-size: larger;
        margin-bottom: 35px;
        background-color: lightgreen;
    }
      
    .second_para {
        color: red;
    }
</style>
  
<body>
    <p class="para">
        Hello there.
    </p>
  
  
    <p class="para second_para">
        Welcome to GeeksForGeeks.
    </p>
  
</body>


Output: 

How to apply two CSS classes to a single element ?

In the above example, the style of class “para” is applied to both of the paragraphs while the style of the class “second_class” is only applied to the second paragraph.

Styling element containing both classes: The element containing both of the classes will be styled only. All the other elements containing either one or zero of the two classes will not be styled. 

Note: In the CSS selector, there is no space between the class names.

Syntax: 

<style>
    .class_1.class_2{
        /* some styles */
    }
</style>

Example: This example shows the use of the above-explained approach.

html




<style>
    .para.second {
        font-size: larger;
        margin-bottom: 35px;
        margin-top: 35px;
        background-color: lightgreen;
        color: red;
    }
</style>
  
<body>
    <p class="para">
        Hello there.
    </p>
  
    <p class="para second">
        Welcome to GeeksForGeeks.
    </p>
  
  
    <p class="second">
        Like our platform?
    </p>
</body>


Output: 
 

How to apply two CSS classes to a single element ?

In the above example, the style is only applied to the second paragraph as it is the only tag that contains both of the classes. 

Assigning classes using JavaScript: We can also add and remove classes using JavaScript. We will use the “classList” property of a tag that returns the class names as a DOMTokenList object. We will use the “add()” method to add multiple classes to an element dynamically.

add(class_1, class_2, …): It is used to assign a class or multiple classes to an element inside HTML. 
In this example, we will assign the classes “para” and “second” to the paragraph with ID “to_be_styled”. The styling technique is the same as described above.

Example: This examples shows the use of the above-explained approach.

html




<style>
    .para.second {
        font-size: larger;
        margin-bottom: 35px;
        margin-top: 35px;
        background-color: lightgreen;
        color: red;
    }
</style>
  
<script>
    function myFunc() {
        var element = document.getElementById(
                        "to_be_styled");
      
        element.classList.add("para", "second");
    }
</script>
  
<body>
    <p>Hello there.</p>
  
    <p id="to_be_styled">
        Welcome to GeeksForGeeks.
    </p>
  
    <p>Like our platform?</p>
  
    <button onclick="myFunc()">
        Click Me to see Effects
    </button>
</body>


Output: 

How to apply two CSS classes to a single element ?

How to apply two CSS classes to a single element ?

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 06 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads