I Selettori

Questa pagina spiega come applicare gli stili in modo selettivo, e come i diversi tipi di selettori abbiano un diverso grado di prevalenza.

Verrà aggiunto qualche attributo ai tag nel documento di esempio, e questi attributi saranno utilizzati nel foglio di stile di esempio

Informazioni: I Selettori

I CSS hanno una terminologia propria per descrivere il linguaggio CSS. Precedentemente in questa guida, abbiamo creato una stringa nel foglio di stile come questa:

strong {color: red;}

Nella terminologia dei CSS l'intera stringa è una regola (rule). La regola inizia con strong, che è un selettore (selector). La sua funzione è quella di selezionare a quali elementi del DOM verrà applicato la regola.

<caption style="font-weight:bold; text-align:left;">Di più... </caption>
La parte contenuta all'interno delle parentesi graffe è la dichiarazione (declaration).

La parola chiave color è una proprietà (property), e red è un valore(value).

Il punto e virgola dopo la coppia proprietà-valore separa quella coppia da altre all'interno della stessa dichiarazione.

Questa guida si riferirà ai selettori del tipo di strong come a dei selettori tag. Le specifiche dei CSS vi si riferiscono invece come a dei selettori di tipo.


Questa pagina della guida spiega in modo più approfondito i selettori che possono essere utilizzati nelle regole dei CSS.

In aggiunta al nome dei tag possono essere utilizzati anche i valori di alcuni attributi. Questa permette di usare i selettori in modo più specifico.

Esistono due attributi che hanno uno status speciale nei CSS: class e id.

L'attributo class di un tag serve ad assegnare quel tag a quella data classe. La scelta del nome della classe è a piacere dell'autore della classe.

Nel foglio di stile occorre digitare un punto "." prima del nome della classe quando viene usata come un selettore.

L'attributo id di un tag serve ad assegnare un id al tag. Anche in questo caso il nome è a piacere, ma deve essere unico per un dato documento.

Nel foglio di stile il selettore id si indica anteponendo il simbolo "cancelletto" (#).

<caption style="font-weight:bold; text-align:left;">Esempi </caption>
Questo tag HTML ha sia un attributo class che uno id:
<P class="key" id="principal">

L'id "principal" deve essere unica in tutto il documento ma gli altri tag nel documento potranno appartenere alla stessa classe ed avere quindi lo stesso valore dell'attributo class.

In un foglio di stile questa regola rende tutti gli elementi della classe key verdi. (Potrebbero anche non essere tutti elementi di tipo P.)

.key {color: green;}

Questa regola rende l'unico elemento con l'id principal in grassetto:

#principal {font-weight: bolder;}


Se più di una regola si applica allo stesso elemento specificando la stessa proprietà, avrà prevalenza quella con il selettore più specifico. Un selettore id è più specifico di un selettore class, che però è più specifico di un selettore di tipo "tag".

<caption style="font-weight:bold; text-align:left;">Di più... </caption>
I selettori possono anche essere combinati così da essere resi più specifici.

Per esempio, il selettore .key seleziona tutti gli elementi che hanno l'attributo class con il valore key. Il selettore p.key seleziona solo gli elementi P che abbiano il valore key all'attributo class.

Non si è limitati ai due attributi speciali, class e id. E' possibile specificare altri attributi utilizzando le parentesi quadre. Ad esempio, il selettore [type=button] seleziona tutti gli elementi che hanno l'attributo type con il valore button assegnato.

Più avanti in questa guida, la pagina sulle (Tabelle) contiene informazioni sui selettori complessi basati sulle relazioni.

Per informazioni complete sui selettori, consulta "Selettori" nelle specifiche CSS.


Se un foglio di stile contiene regole in conflitto e con lo stesso grado di specificità, avrà prevalenza la regola che viene dopo nel foglio di stile.

Se si incontrano dei problemi con delle regole in conflitto si può provare a risolverli rendendo una delle due regole più specifica. Se ciò non è possibile, si può provare a spostare la regola che si intende far prevalere in fondo al foglio di stile, per far sì che abbia la priorità.

Azione: Utilizzare i selettori "class" e "id"

Apri il file HTML e duplica il paragrafo facendo copia/incolla. Quindi aggiungi gli attributi di id e class al primo paragrafo, e solo l'id al secondo, come mostrato sotto. In alternativa si può copiare e incollare quanto sotto, sostituendo l'intero file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Sample document</TITLE>
  <LINK rel="stylesheet" type="text/css" href="style1.css">
  </HEAD>
  <BODY>
    <P id="first">
      <STRONG class="carrot">C</STRONG>ascading
      <STRONG class="spinach">S</STRONG>tyle
      <STRONG class="spinach">S</STRONG>heets
    </P>
    <P id="second">
      <STRONG>C</STRONG>ascading
      <STRONG>S</STRONG>tyle
      <STRONG>S</STRONG>heets
    </P>
  </BODY>
</HTML>

Ora apri il file CSS. Sostituisci l'intero contenuto con:

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}

Aggiorna il browser per vedere il risultato:

Cascading Style Sheets
Cascading Style Sheets


Prova a cambiare l'ordine delle regole nel tuo file CSS: osserva come l'ordine non ha nessun effetto in questo caso.

I selettori di classe .carrot e .spinach hanno sempre la priorità su il selettore di tag strong.

Il selettore di id #first ha sempre la priorità sui selettori di classe e di tag.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Esercizi </caption>
Senza modificare il file HTML, aggiungi un unica regola al file CSS che mantenga il colore delle lettere iniziali, ma renda il testo del secondo paragrafo di colore blu:
Cascading Style Sheets
Cascading Style Sheets

Ora modifica la regola appena aggiunta (senza cambiare nient'altro) per rendere anche il testo del primo paragrafo di colore blu:

Cascading Style Sheets
Cascading Style Sheets


Cos'altro?

Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione.

Il foglio di stile inizia ad avere un aspetto complicato. La prossima pagina descrive i modi per rendere i CSS più semplici da leggere: CSS leggibili

Document Tags and Contributors

Contributors to this page: Verruckt, Indigo
Last updated by: Verruckt,