crus4

logo

HTML Class Attribute


The HTML class Attribute is used to specify one or more class names for an HTML element. We can use class attribute on any HTML element. Different HTML elements can share the same class attribute.

How to Use Class Attribute

In a below example we will define style for a class name “country”, with the help of CSS.

Example
<!DOCTYPE html>
<html> 
<head> 
   <style>
      .country {
         background-color:orange; 
         color: white;
      }
   </style>
<head> 
<body>
   <h3 class = "country"> Russia </h3> 
<p> Russia is the largest country in the world. </p> 
   <h3 class = "country"> China </h3>
<p> China is the 2nd largest country in the world. </p>
   <h3 class = "country"> United States </h3>
<p> United States is the 3rd largest country in the world. </p> 
Output

Russia


Russia is the largest country in the world.


China


China is the 2nd largest country in the world.


United States


United States is the 3rd largest country in the world.

How to use class attribute in JavaScript

I have already showed you how you can use class attribute in CSS. Now let’s see how you can use this in JavaScript. We use getElementsByClassName() method to specify the class name in JavaScript.

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

	<h3 class="country"> Russia </h3>
	
<p> Russia is the largest country in the world.</p>

	<h3 class="country"> China </h3>
	
<p> China is the 2nd largest country in the world.</p>

	<h3 class="country"> United States </h3>
	
<p> United States is the 3rd largest country in the world.</p>

</body>
</html>
Output

Click the button, and a JavaScript hides all elements with the class name "country":

Russia

Russia is the largest country in the world.

China

China is the 2nd largest country in the world.

United States

United States is the 3rd largest country in the world.

If you click on the Hide elements button, JavaScript hides all elements with the class name "country".

Adding Multiple Classes to HTML Elements

As I already told you HTML elements can have more than one class name, and each class name must be separated by a space. In a below example let's try to add multiple classes to HTML elements:

Example
<!DOCTYPE html>
<html>
<style>
	.country {
		background-color: orange;
		color: white;
		padding: 8px;
	}
	
	.middle {
		text-align: center;
	}
</style>

<body>

	<h3 class="country middle"> Russia </h3>
	<h3 class="country"> China </h3>
	<h3 class="country"> United States</h3>

</body>

</html>
Output

Russia

China

United States

All three h3 headers have the common class name "country", but we also add class name "middle", with Russia , Which makes the text "Russia" aligned to center.


Related Posts

HTML id Attribute

HTML Colors

HTML Class Attribute – crus4

3 thoughts on “HTML Class Attribute – crus4

Leave a Reply

Your email address will not be published. Required fields are marked *