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






                        filter_none








Output: 

Image




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:











                                    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







                        filter_none








Output :


    

  • Before Clicking the hide elements button:
    
Image
    • 

  • 
After clicking on the hide elements button :
    
Image
    • 





Using multiple classes: 

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


Example:











                                    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







                        filter_none








Output :

Image




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:











                                    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







                        filter_none








Output :


Image




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
    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Image
Shubrodeep Banerjee
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 :  anmol_mittal26, nidhi_biet