CSS Group Selector

The CSS group selector is used to apply the same styles to multiple elements at once by listing the selectors separated by commas. This is a concise way to style multiple elements without duplicating code.

The syntax for the group selector is:

</>
Copy
selector1, selector2, selector3 {
    property: value;
}

Where:

ParameterDescription
selector1, selector2, selector3Comma-separated list of selectors to apply the same styles to.
propertyA CSS property (e.g., color, margin, etc.).
valueThe value assigned to the CSS property.

Examples

Styling Multiple Elements using Group Selector

In this example, we set the text color of <h1>, <h2>, and <h3> elements to green using a group selector.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        h1, h2, h3 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>This is an H1 heading</h1>
    <h2>This is an H2 heading</h2>
    <h3>This is an H3 heading</h3>
</body>
</html>

Styling Paragraphs and Links using Group Selector

Here, we set the text color of all <p> elements to blue and the text color of all <a> elements to blue with no underline.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p, a {
            color: blue;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
    <a href="#">This is a link.</a>
</body>
</html>

Styling Divs and Spans using Group Selector

In this example, we add a background color of lightgray and padding of 10px to both <div> and <span> elements.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div, span {
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <span>This is a span element.</span>
</body>
</html>