Skip to content
Related Articles

Related Articles

Improve Article
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



My Personal Notes arrow_drop_up
Recommended Articles
Page :