Selettori di gruppo

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 14 di 76.

Il selettore di gruppo viene utilizzato per selezionare più elementi HTML e applicare gli stessi stili a tutti. È particolarmente utile quando vuoi applicare un insieme comune di stili a elementi diversi senza dover scrivere regole separate per ciascun elemento. Raggruppando i selettori, puoi scrivere codice CSS più conciso ed efficiente.

Per usare un selettore di gruppo, elenca i selettori che vuoi raggruppare, separati da virgole (,). Ecco la sintassi di base:

selector1, selector2, selector3 {
    property: value;
}

Ad esempio, supponiamo che tu voglia applicare lo stesso colore del testo e la stessa dimensione del carattere a tutti gli elementi <h1>, <h2> e <p>. Puoi usare un selettore di gruppo in questo modo:

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

In questo esempio, il selettore di gruppo seleziona tutti gli elementi <h1>, <h2> e <p>. Le dichiarazioni impostano il colore del testo sul blu e la dimensione del carattere su 16 pixel per tutti questi elementi.

Puoi raggruppare qualsiasi tipo di selettori, inclusi i selettori di tipo, i selettori di classe e i selettori ID:

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

Sfida

Facile

Ti viene fornito un documento HTML con vari elementi, tra cui intestazioni (<h1>, <h2>), paragrafi (<p>) e un elemento divisione (<div>). Il tuo compito è usare un selettore di gruppo per applicare uno stile a questi elementi. Segui i passaggi qui sotto:

Scrivi una regola CSS usando un selettore di gruppo che selezioni tutti gli elementi <h1> e <h2>. Imposta il colore del testo di questi elementi su red.
Scrivi una regola CSS usando un selettore di gruppo che selezioni tutti gli elementi <p> e l'elemento <div>. Imposta il colore di sfondo di questi elementi su lightgray e la dimensione del carattere su 18 pixel.

Provalo tu

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