Gruppo di selettori di CSS

Gruppo di selettori

Supponiamo che si desideri che gli elementi h2 e i paragrafi abbiano un colore grigio. Il modo più semplice per raggiungere questo obiettivo è utilizzare la seguente dichiarazione:

h2, p {color:gray;}

Metti i selettori h2 e p sulla sinistra delle regole, separati da una virgola, e definisci una regola. Lo stile sulla destra (color:gray;) verrà applicato agli elementi richiamati da questi selettori. La virgola informa il browser che la regola contiene due selettori diversi. Senza questa virgola, il significato della regola sarebbe completamente diverso. Vedi anche i selettori discendenti.

È possibile raggruppare una qualsiasi quantità di selettori insieme, senza alcuna limitazione.

Ad esempio, se si desidera visualizzare molti elementi in grigio, è possibile utilizzare regole simili a quelle seguenti:

body, h2, p, table, th, td, pre, strong, em {colore:grigio;}

Suggerimento:Attraverso la suddivisione, i creatori possono 'comprimere' alcuni tipi di stili insieme, così da ottenere una tabella di stili più concisa.

Le seguenti due regole producono lo stesso risultato, ma è chiaro vedere quale è più facile da scrivere:

/* no grouping */
h1 {colore:blu;}
h2 {colore:blu;}
h3 {colore:blu;}
h4 {colore:blu;}
h5 {colore:blu;}
h6 {colore:blu;}
/* grouping */
h1, h2, h3, h4, h5, h6 {colore:blu;}

Prova tu stesso

Le suddivisioni forniscono alcune scelte interessanti. Ad esempio, tutte le suddivisioni di regole nell'esempio seguente sono equivalenti, ognuna mostra un diverso metodo per la suddivisione di selettori e gruppi di dichiarazioni:

/* group 1 */
h1 {colore:argento; sfondo:bianco;}
h2 {colore:argento; sfondo:grigio;}
h3 {colore:bianco; sfondo:grigio;}
h4 {colore:argento; sfondo:bianco;}
b {colore:grigio; sfondo:bianco;}
/* group 2 */
h1, h2, h4 {colore:argento;}
h2, h3 {sfondo:grigio;}
h1, h4, b {sfondo:bianco;}
h3 {colore:bianco;}
b {colore:grigio;}
/* group 3 */
h1, h4 {colore:argento; sfondo:bianco;}
h2 {colore:argento;}
h3 {colore:bianco;}
h2, h3 {sfondo:grigio;}
b {colore:grigio; sfondo:bianco;}

prova personalmente:

Attenzione, nel gruppo 3 è stato utilizzato il 'raggruppamento delle dichiarazioni'. Vi presenteremo il 'raggruppamento delle dichiarazioni' in seguito.

Selettore di jolly

CSS2 ha introdotto un nuovo selettore semplice - il selettore universale (universal selector), rappresentato da un asterisco (*). Questo selettore può corrispondere a qualsiasi elemento, come un carattere di jolly.

Ad esempio, la regola seguente renderà ogni elemento del documento rosso:

* {color:red;}

Prova tu stesso

Questa dichiarazione è equivalente a elencare un selettore di gruppo per tutti gli elementi del documento. Utilizzando il selettore di tutto, con un solo colpo di tastiera (un singolo asterisco), è possibile specificare il valore dell'attributo 'color' come 'red' per tutti gli elementi del documento.

Raggruppamento delle dichiarazioni

Si può raggruppare sia i selettori che le dichiarazioni.

Supponiamo che si desideri che tutti gli elementi h1 abbiano uno sfondo rosso e che vengano visualizzati con il testo blu utilizzando il font Verdana di 28 pixel, è possibile scrivere lo stile seguente:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Ma questo metodo non è molto efficiente. Soprattutto quando si crea una lista di stili per un elemento con più stili, può essere fastidioso. Invece, possiamo raggruppare le dichiarazioni insieme:

h1 {font: 28px Verdana; color: white; background: black;}

Questo ha lo stesso effetto delle precedenti 3 righe del foglio di stile.

Attenzione, per raggruppare le dichiarazioni, è molto importante utilizzare un punto e virgola alla fine di ciascuna dichiarazione. Il browser ignora i caratteri di spazi bianchi nel foglio di stile. Basta aggiungere un punto e virgola per poter usare senza esitazione il seguente formato per creare uno stile:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Prova tu stesso

Come si vede, questa scrittura è più leggibile.

Ma se si ignora il secondo punto e virgola, l'agente utente interpreterà il foglio di stile come segue:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Prova tu stesso

Poiché 'background' non è un valore legittimo per 'color', e dato che è possibile specificare solo un termine per 'color', l'agente utente ignorerà completamente questa dichiarazione di colore (inclusa 'background: black'). Di conseguenza, l'intestazione h1 verrà visualizzata solo in blu, senza sfondo rosso, anche se è più probabile che non venga visualizzata nemmeno la blu. Al contrario, questi titoli verranno visualizzati solo con il colore predefinito (solitamente nero) e senza colore di sfondo. La dichiarazione 'font: 28px Verdana' funziona correttamente perché si conclude con un punto e virgola.

Come il gruppo di selettori, il gruppo di dichiarazioni è un metodo conveniente che può abbreviare la tabella di stile, rendendola più chiara e più facile da mantenere.

Suggerimento:Aggiungere un punto e virgola alla fine dell'ultima dichiarazione della regola è una buona abitudine. Quando si aggiunge un'altra dichiarazione alla regola, non si deve preoccupare di dimenticare di inserire un altro punto e virgola.

Combinazione di gruppi di selettori e dichiarazioni

Possiamo combinare gruppi di selettori e gruppi di dichiarazioni in una regola per definire uno stile relativamente complesso con poche istruzioni.

Le seguenti regole assegnano uno stile complesso a tutti i titoli:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Prova tu stesso

Questa regola definisce lo stile di tutti i titoli con testo grigio su sfondo bianco, con margine interno di 10 pixel e bordo solido di 1 pixel, e il font è Verdana.