CSS riguarda lo stile di pagine Web, siti Web, documenti HTML, ecc. Pertanto offre molti strumenti di styling come selettori, proprietà CSS, ecc. I selettori sono il componente iniziale delle regole CSS, le regole che prendono di mira alcuni elementi HTML e lo modellano in base ad alcune proprietà CSS specifiche.

In CSS, i selettori sono classificati in cinque categorie i.e. Selezionisti di base, selettori combinatori, selettori di classe pseudo e selettori di attributi. La categoria di base è costituita da un selettore di elementi, selettore di classe, selettore ID, selettore universale e selettore di raggruppamento. Puoi saperne di più sui selettori di base nei nostri selettori CSS tutorial.

Questo articolo spiegherà le seguenti terminologie:

• Cos'è un selettore di raggruppamento in CSS?
• Sintassi di base del selettore di raggruppamento.
• Come raggruppare più elementi HTML usando un selettore di raggruppamento.

Iniziamo con la comprensione di base del selettore di raggruppamento:

Cos'è un selettore di raggruppamento in CSS

Il selettore di raggruppamento prende di mira i molteplici elementi HTML e li stima contemporaneamente. Concisi il codice e riduce il po 'di sforzo extra. Mentre selezioniamo/raggruppiamo più di un elemento HTML, dobbiamo separare ogni elemento HTML con una virgola.

Sintassi

Diamo un'occhiata al seguente frammento per comprendere la sintassi del selettore di raggruppamento:

Nella figura sopra, P, H2, H3 e piè di pagina sono elementi HTML raggruppati per essere disegnati.

Spostamo un ulteriore passo avanti per comprendere il concetto di raggruppamento del selettore con l'aiuto di un esempio:

Come raggruppare più elementi HTML usando un selettore di raggruppamento

Diamo un'occhiata all'esempio di seguito per capire come implementare uno stile unico su un gruppo di diversi elementi HTML:

Esempio Questo esempio ha diversi elementi HTML i.e.

,

, E

. Dobbiamo modellare tutti questi elementi in stile font in corsivo, con il colore di sfondo blu reale.

Html

Linuxhint.com

CIAO! Benvenuti in Linuxhint.com

Raggruppamento del selettore

Questo è un esempio di raggruppamento del selettore

CSS

H1, H2, P
Background-color: Royalblue;
Font in stile: corsivo;

Il codice di cui sopra raggruppava tre elementi, implementano lo stesso stile su tutti gli elementi e, di conseguenza, otterremo il seguente output:

Verifica che tutti gli elementi implementano lo stesso stile e che il selettore di raggruppamento funzioni correttamente.

Conclusione

Per implementare un selettore di raggruppamento tutto ciò che devi fare è semplicemente scrivere tutti i nomi dell'elemento che si desidera modellare e aggiungere una virgola tra ogni elemento. In questo modo, lo stile specificato sarà implementato per ciascun elemento mirato contemporaneamente. Questo articolo copre ogni aspetto del raggruppamento dei selettori, a partire da quello che è il selettore di gruppo e come usarlo.