Skip to main content

Group selectors

By grouping selectors together, you can apply same style to elements selected by any of these selectors.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grouped Selectors Example</title>
    <style>
        /* Reset and base styles */
        body, h1, p {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }

        /* Grouped selectors for layout */
        header, main, footer {
            padding: 20px;
            margin: 10px;
            border-radius: 5px;
        }

        /* Grouped selectors with pseudo-classes */
        header:hover, main:hover, footer:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }

        /* Grouped selectors with attribute */
        [class^="section-"] {
            background-color: #fff;
            padding: 15px;
            margin-bottom: 15px;
            margin-right: 15px;
            border-left: 5px solid #3498db;
        }

        /* Grouped selectors with combinators */
        .section-1 > h2,
        .section-2 > h2,
        .section-3 > h2 {
            color: #3498db;
            margin-bottom: 10px;
        }

        /* Media query for responsiveness */
        @media screen and (min-width: 768px) {
            main {
                display: flex;
                justify-content: space-between;
            }

            [class^="section-"] {
                flex-basis: calc(33.33% - 20px);
            }
        }

        /* Grouped selectors with pseudo-elements */
        .section-1::before,
        .section-2::before,
        .section-3::before {
            content: "✦";
            margin-right: 5px;
            color: #3498db;
        }

        /* Animation for footer */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.002); }
            100% { transform: scale(1); }
        }

        footer:hover {
            animation: pulse 1s infinite;
        }
    </style>
</head>
<body>
    <header>
        <h1>Grouped Selectors Example</h1>
    </header>
    <main>
        <div class="section-1">
            <h2>Section 1</h2>
            <p>This is the content for section 1.</p>
        </div>
        <div class="section-2">
            <h2>Section 2</h2>
            <p>This is the content for section 2.</p>
        </div>
        <div class="section-3">
            <h2>Section 3</h2>
            <p>This is the content for section 3.</p>
        </div>
    </main>
    <footer>
        <p>Footer content goes here.</p>
    </footer>
</body>
</html>

Live view.

No comments to display

Back to top