Skip to content
Related Articles

Related Articles

HTML | Class Attribute

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 10 Aug, 2021

Class in html: 
 

  • The class is an attribute which specifies one or more class names for an HTML element.
  • The class attribute can be used on any HTML element.
  • The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.

Supported Tags: It supports all HTML elements. 

Example :
 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .country {
            background-color: black;
            color: white;
            padding: 8px;
        }
    </style>
</head>
 
<body>
 
    <h2 class="country">CHINA</h2>
     
<p>China has the largest population
       in the world.</p>
 
 
    <h2 class="country">INDIA</h2>
     
<p>India has the second largest
       population in the world.</p>
 
 
    <h2 class="country">UNITED STATES</h2>
     
<p>United States has the third largest
       population in the world.</p>
 
 
</body>
 
</html>

Output: 
 

Explanation: In the above example CSS styles all elements with the class name “country”.
Using the class attribute in JavaScript: JavaScript can access elements with a specified class name by using the getElementsByClassName() method.
Example: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <script>
        function myFunction() {
            var x = document.getElementsByClassName("country");
            for (var i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
        }
    </script>
</head>
 
<body>
 
     
<p>Click the button, and a JavaScript hides all
       elements with the class name "country":</p>
 
 
    <button onclick="myFunction()">Hide elements</button>
 
    <h2 class="country">CHINA</h2>
     
<p>China has the largest population in the world.</p>
 
 
    <h2 class="country">INDIA</h2>
     
<p>India has the second largest population in the world.</p>
 
 
    <h2 class="country">UNITED STATES</h2>
     
<p>United States has the third largest population
       in the world.</p>
 
 
</body>
 
</html>

Output : 
 

  • Before Clicking the hide elements button: 
     

  • After clicking on the hide elements button : 
     

Using multiple classes: 
HTML elements can have more than one class name, where each class name must be separated by a space.
Example: 
 

html




<!DOCTYPE html>
<html>
<style>
    .country {
        background-color: black;
        color: white;
        padding: 10px;
    }
     
    .middle {
        text-align: center;
    }
</style>
 
<body>
 
    <h2 class="country middle">CHINA</h2>
    <h2 class="country">INDIA</h2>
    <h2 class="country">UNITED STATES</h2>
 
</body>
 
</html>

Output : 
 

Explanation: All three headers have the class name “country”, but in addition to that, CHINA also has the class name “middle”, which makes the text center-aligned.
Using same class in different tags: Different tags, like <h2> and <p>, can have the same class name and thereby share the same style.
Example: 
 

html




<!DOCTYPE html>
<html>
<style>
    .country {
        background-color: black;
        color: white;
        padding: 10px;
    }
</style>
 
<body>
 
    <h2 class="country">CHINA</h2>
    <p class="country">China has the largest
                population in the world.</p>
 
 
</body>
 
</html>

Output :
 

Explanation: Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling.
Supported Browser: The browser supported by Class attribute are listed below : 
 

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

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!