Gruppenselektoren

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

Der Gruppenselektor wird verwendet, um mehrere HTML-Elemente auszuwählen und auf alle dieselben Stile anzuwenden. Das ist besonders nützlich, wenn du eine gemeinsame Gruppe von Stilen auf verschiedene Elemente anwenden möchtest, ohne separate Regeln für jedes Element schreiben zu müssen. Durch das Gruppieren von Selektoren kannst du präziseren 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.

Du kannst jede Art von Selektoren gruppieren, einschließlich Typselektoren, Klassenselektoren und ID-Selektoren:

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

Aufgabe

Einfach

Dir liegt ein HTML-Dokument mit verschiedenen Elementen vor, darunter Überschriften (<h1>, <h2>), Absätze (<p>) und ein Bereich (<div>). Deine Aufgabe besteht darin, diese Elemente mithilfe eines Gruppenselektors zu formatieren. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel mit einem Gruppenselektor, die auf alle <h1>- und <h2>-Elemente zielt. Setze die Textfarbe dieser Elemente auf Rot.
Schreibe eine CSS-Regel mit einem Gruppenselektor, die auf alle <p>-Elemente und das <div>-Element zielt. Setze die Hintergrundfarbe dieser Elemente auf Hellgrau 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>