CSS Class Selector

Last Updated : 15 Apr, 2025

CSS class selectors are one of the most versatile tools in your front-end development toolkit. They allow you to apply styles to multiple elements on a webpage, ensuring your design remains consistent and easily maintainable.

Syntax

.class-name{
    property: value;
}

1. Basic class selector

The basic class selector applies styles to all elements with a specified class name. Use a period (.) before the class name in the CSS.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <p class="highlight">This text is highlighted.</p>
    <p>This text is not highlighted.</p>
</body>
</html>
<!--Driver Code Ends }-->

2. Multiple Class Selectors

Multiple class selectors apply styles only to elements that have all the specified classes. Separate the class names with a dot.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .box.round {
            border-radius: 10px;
            border: 2px solid black;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="box round">This is a rounded box.</div>
    <div class="box">This box is not rounded.</div>
</body>
</html>
<!--Driver Code Ends }-->

3. Chaining Class Selectors with Other Selectors

You can combine class selectors with element or pseudo-class selectors for more specific targeting.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        p.important {
            color: red;
            font-size: 18px;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <p class="important">This is an important paragraph.</p>
    <p>This paragraph is not styled.</p>
</body>
</html>
<!--Driver Code Ends }-->

4. Global Class Application

The universal selector with a class allows you to target all elements with the specified class.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        *.notice {
            color: blue;
            font-style: italic;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <h1 class="notice">Notice this heading.</h1>
    <p class="notice">This is a noticed paragraph.</p>
</body>
</html>
<!--Driver Code Ends }-->

5. Combining Multiple Class Names

An element can have multiple class names, and each class’s styles will combine.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .text-bold {
            font-weight: bold;
        }
        .text-italic {
            font-style: italic;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <p class="text-bold text-italic">This text is bold and italic.</p>
</body>
</html>
<!--Driver Code Ends }-->

6. Targeting Nested Elements with Class Selectors

You can apply styles to elements within a parent class using descendant selectors.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .container p {
            color: green;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <div class="container">
        <p>This paragraph is inside a container.</p>
    </div>
    <p>This paragraph is outside the container.</p>
</body>
</html>
<!--Driver Code Ends }-->

7. Overriding Class Styles

Use multiple classes on an element to override specific styles defined in earlier classes.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .button {
            padding: 10px;
            background-color: gray;
        }
        .primary {
            background-color: blue;
            color: white;
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <button class="button primary">Primary Button</button>
</body>
</html>
<!--Driver Code Ends }-->

8. Using Class Selectors with Media Queries

Class selectors can be used within media queries to make styles responsive.

HTML

<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->

    <style>
        .responsive {
            font-size: 16px;
        }
        @media (max-width: 600px) {
            .responsive {
                font-size: 12px;
            }
        }
    </style>

<!--Driver Code Starts{-->
</head>
<body>
    <p class="responsive">Resize the browser window to see the text size change.</p>
</body>
</html>
<!--Driver Code Ends }-->

CSS :default Selector

manaschhabra2

Improve

Article Tags :

CSS Class Selector

1. Basic class selector

2. Multiple Class Selectors

3. Chaining Class Selectors with Other Selectors

4. Global Class Application

5. Combining Multiple Class Names

6. Targeting Nested Elements with Class Selectors

7. Overriding Class Styles

8. Using Class Selectors with Media Queries

Similar Reads

Thank You!

What kind of Experience do you want to share?