HTML | Class Attribute

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.

Example :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : anmol_mittal26, nidhi_biet