Open In App

CSS Class Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The .class selector is used to select all elements which belong to a particular class attribute. In order to select the elements with a particular class, use the period (.) character specifying the class name ie., it will match the HTML element based on the contents of their class attribute. The class name is mostly used to set the CSS property to a given class.

Syntax: 

.class {
    // CSS property
} 

Example 1: This example demonstrates the class Selector for the specific HTML element.

HTML




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

HTML




<!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 the .class selector are listed below: 

  • Google Chrome 1.0
  • Firefox 1.0
  • Microsoft Edge 12.0
  • Opera 3.5
  • Internet Explorer 3.0
  • Safari 1.0


Last Updated : 10 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads