CSS | Class Selector - GeeksforGeeks

The .class selector is used to select all elements which belong to a particular class attribute. To select the elements with a particular class, use (.) character with specifying class name. Class name is mostly used to set the CSS property to given class.

Syntax:

.class {
    // CSS property
}

Example 1:

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            .geeks { 
                color:green; 
            }  
            .gfg { 
                background-color: yellow; 
                font-style:italic; 
                color:green; 
            } 
          
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1 class = "geeks"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>.class Selector</h2> 
          
        <div class = "gfg"> 
            <p>GeeksforGeeks: A computer science portal</p> 
        </div> 
    </body> 
</html>                     

Output:

Example 2: This example describes the space separated class name.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>class selector</title> 
        <style> 
            .geeks { 
                color:green; 
            }  
            .gfg { 
                background-color:yellow; 
              
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
          
        <h1 class = "geeks"> 
            GeeksforGeeks 
        </h1> 
          
        <h2 class = "gfg">.class Selector</h2> 
          
        <p class = "geeks gfg"> 
            GeeksforGeeks: A computer science portal 
        </p> 
    </body> 
</html>                     

Output:

Supported Browsers: The browser supported by .class selector are listed below:

Apple Safari
Google Chrome
Firefox
Opera
Internet Explorer

My Personal Notes

Recommended Posts: