CSS Class Selector

The CSS .class selector is used to select all elements that belong to a specific class attribute. By using the period (.) character followed by the class name, you can apply CSS properties to all elements with that class.

Syntax:

.class {
    // CSS property
}

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

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
    .Beginner {
        color: green;
    }
    
    .gfg {
        background-color: yellow;
        font-style: italic;
        color: green;
    }
    </style>
</head>

<body style="text-align:center">
    <h1 class="Beginner">
            w3wiki
    </h1>
    <h2>.class Selector</h2>
    <div class="gfg">
        <p>w3wiki: 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>
        .Beginner {
            color: green;
        }

        .gfg {
            background-color: yellow;
    </style>
</head>

<body style="text-align:center">
    <h1 class="Beginner">
        w3wiki
    </h1>
    <h2 class="gfg">.class Selector</h2>
    <p class="Beginner gfg">
        w3wiki: A computer science portal
    </p>
</body>
</html>

Output:

The CSS class selector is a powerful tool for applying styles to specific groups of elements, enhancing the flexibility and control you have over your web design.

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

Tags:

#CSS-Selectors #CSS #Web Technologies

CSS :checked Selector

CSS :default Selector

CSS Class Selector

Contact Us