CSS | Class Selector

Difficulty Level : Basic
Last Updated : 02 Jan, 2019

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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles