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.


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 :




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.


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.


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.



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