HTML | Class Attribute

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
 
anmol_mittal26
nidhi_biet
ManasChhabra2
HTML-Attributes
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.