Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML Class Attribute

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Class in HTML: 

  • The class is an attribute that 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: This example shows the use of the classes in HTML. 

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: 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: This example shows the use of class attributes in javascript.

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: 

 

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

Example: In this example, we will use more than one class.

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: 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 the same class in different tags: Different tags, like <h2> and <p>, can have the same class name and thereby share the same style.

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

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: 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
  • Edge 12 and above
  • Firefox 32 and above
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Last Updated : 10 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials