Gruppen-Selektoren

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

Der Gruppenselektor wird verwendet, um mehrere HTML-Elemente auszuwählen und dieselben Stile auf alle anzuwenden. Dies ist besonders nützlich, wenn Sie eine gemeinsame Gruppe von Stilen auf verschiedene Elemente anwenden möchten, ohne separate Regeln 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 Gruppenselektor zu verwenden, listen Sie die Selektoren auf, die Sie gruppieren möchten, getrennt durch Kommas (,). Hier ist die grundlegende Syntax:

selector1, selector2, selector3 {
    property: value;
}

Angenommen, Sie möchten beispielsweise dieselbe Textfarbe und Schriftgröße auf alle <h1>, <h2> und <p>-Elemente anwenden. Sie können einen Gruppenselektor wie diesen verwenden:

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

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

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

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

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit verschiedenen Elementen, einschließlich Überschriften (<h1>, <h2>), Absätzen (<p>) und einem Bereich (<div>). Ihre Aufgabe ist es, einen Gruppenselektor zu verwenden, um diese Elemente zu gestalten. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel mit einem Gruppenselektor, die alle <h1>- und <h2>-Elemente anspricht. Setzen Sie die Textfarbe dieser Elemente auf red.
Schreiben Sie eine CSS-Regel mit einem Gruppenselektor, die alle <p>-Elemente und das <div>-Element anspricht. Setzen Sie die Hintergrundfarbe dieser Elemente auf lightgray und die Schriftgröße auf 18 pixels.

Spickzettel

Der Gruppenselektor ermöglicht es Ihnen, dieselben Stile auf mehrere HTML-Elemente anzuwenden, indem Sie Selektoren durch Kommas (,) trennen:

selector1, selector2, selector3 {
    property: value;
}

Beispiel für die Gruppierung von Element-Selektoren:

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

Sie können jede Art von Selektoren gruppieren (Typ, Klasse, ID):

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

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>