Gruppen-Selektoren

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 14 von 76.

Der Group-Selektor wird verwendet, um mehrere HTML-Elemente auszuwählen und dieselben Styles auf alle von ihnen anzuwenden. Dies ist besonders nützlich, wenn Sie eine gemeinsame Gruppe von Styles auf verschiedene Elemente anwenden möchten, ohne separate rules für jedes Element schreiben zu müssen. Durch das Gruppieren von Selektoren können Sie prägnanteren und effizienteren CSS-Code schreiben.

Um einen Gruppen-Selektor zu verwenden, listen Sie die Selektoren, die Sie gruppieren möchten, durch Kommas (,) getrennt auf. Hier ist die grundlegende Syntax:

selector1, selector2, selector3 {
    property: value;
}

Nehmen wir zum Beispiel an, Sie möchten dieselbe Textfarbe und Schriftgröße auf alle <h1>-, <h2>- und <p>-Elemente anwenden. Sie können einen Gruppen-Selektor wie diesen verwenden:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

In diesem Beispiel spricht der Gruppen-Selektor alle <h1>-, <h2>- und <p>-Elemente an. Die Deklarationen setzen die Textfarbe auf blue und die Schriftgröße auf 16 Pixel für alle diese Elemente.

Sie können jede Art von Selectors gruppieren, einschließlich Typ-Selektoren, Klassen-Selektoren und ID-Selektoren:

h1, .highlight, #intro {
    background-color: yellow;
}

Aufgabe

Einfach

Ihnen liegt ein HTML-Dokument mit verschiedenen Elementen vor, darunter Überschriften (<h1>, <h2>), Absätze (<p>) und ein Bereich (<div>). Ihre Aufgabe ist es, einen Gruppen-Selektor zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel unter Verwendung eines Gruppen-Selektors, der auf alle <h1>- und <h2>-Elemente abzielt. Setzen Sie die Textfarbe dieser Elemente auf "red".
Schreiben Sie eine CSS-Regel unter Verwendung eines Gruppen-Selektors, der auf alle <p>-Elemente und das <div>-Element abzielt. Setzen Sie die Hintergrundfarbe dieser Elemente auf "lightgray" und die Schriftgröße auf 18 Pixel.

Probier es selbst

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>