CSS - Group Selectors

Quiz

Group Selectors in CSS

CSS group selector applies the same style to multiple elements at a time. The names of elements can be separated by commas. Group selector keeps CSS concise and avoids redundancy.

Syntax

The syntax for the CSS group selector is as follows:

#selector_1, .selector_2, selector_3 {
    /* property: value; */
    color: #04af2f
}

CSS Group Selectors Example

In this example, we have used the same style on all three elements using group selectors.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        span, #para, .myClass {
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p id="para">This is a paragraph element.</p>
    <div class="myClass">This is a div element.</div>
    <br>
    <span>This is a span element.</span>
</body>
</html>

Group Selectors Example with Pseudo-classes

In this example, we have used pseudo classes with group selectors. CSS :active pseudo-class changes the text color of the link and button on clicking while CSS :hover pseudo-class changes the background-color of the div and p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .link:active, #btn:active {
            color: #04af2f;
        }

        .myDiv:hover, #para:hover {
            background-color: #031926;
            color: white;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        Hover over me
    </div>
    <p id="para">This is a paragraph.</p>
    <a class="link" href="#">Click on this link.</a>
    <br><br>
    <button id="btn">Click me</button>
</body>
</html>

Print Page