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.
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
- Edge 12 and above
- Firefox 32 and above
- Opera
- Safari
Please Login to comment...