Tutorialspoint.dev

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 :

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




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


After clicking on the hide elements button :

Please click on the link below to see the video output of the above code:
Class_javascript_output

Using multiple classes:

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


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


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



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter