Related Articles

Related Articles

HTML | Class Attribute
  • Difficulty Level : Easy
  • Last Updated : 30 Jul, 2019

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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :