Grupowanie selektorów

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 14 z 76.

Selektor grupujący służy do wybierania wielu elementów HTML i stosowania tych samych stylów do każdego z nich. Jest to szczególnie przydatne, gdy chcesz zastosować wspólny zestaw stylów do różnych elementów, nie pisząc osobnych reguł dla każdego z nich. Grupując selektory, możesz pisać bardziej zwięzły i wydajny kod CSS.

Aby użyć selektora grupowego, wypisz selektory, które chcesz pogrupować, oddzielając je przecinkami (,). Oto podstawowa składnia:

selector1, selector2, selector3 {
    property: value;
}

Na przykład załóżmy, że chcesz zastosować ten sam kolor tekstu i rozmiar czcionki do wszystkich elementów <h1>, <h2> i <p>. Możesz użyć selektora grupowego w ten sposób:

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

W tym przykładzie selektor grupowy wybiera wszystkie elementy <h1>, <h2> i <p>. Deklaracje ustawiają kolor tekstu na niebieski, a rozmiar czcionki na 16 pikseli dla wszystkich tych elementów.

Możesz grupować dowolne typy selektorów, w tym selektory typu, selektory klas i selektory ID:

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

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z różnymi elementami, w tym nagłówkami (<h1>, <h2>), akapitami (<p>) i elementem podziału (<div>). Twoim zadaniem jest użycie selektora grupowego do nadania stylów tym elementom. Wykonaj poniższe kroki:

Napisz regułę CSS z użyciem selektora grupowego, która wybiera wszystkie elementy <h1> i <h2>. Ustaw kolor tekstu tych elementów na czerwony.
Napisz regułę CSS z użyciem selektora grupowego, która wybiera wszystkie elementy <p> oraz element <div>. Ustaw kolor tła tych elementów na jasnoszary, a rozmiar czcionki na 18 pikseli.

Spróbuj swoich sił

<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>