CSS Class Selector
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
