Id e classi: due selettori speciali | Guida CSS

Id e classi:=20 due selettori speciali

I CSS non sarebbero uno strumento cos=EC potente senza = questi tipi=20 di selettori. Classi e ID sono davvero una = delle=20 chiavi per sfruttare al meglio questo linguaggio.

Partiamo dall'inizio. In (X)HTML esistono due attributi=20 fondamentali applicabili a tutti gli elementi: sono class = e=20 id. Dichiarare questi attributi a prescindere dai CSS = non ha=20 alcun senso e non modifica in alcun modo la presentazione = della=20 pagina. Ecco un esempio. In questa pagina abbiamo assegnato al = paragrafo un=20 attributo class=3D"testorosso":

Come vedete non succede nulla. Il problema =E8 che il = valore=20 dell'attributo class deve trovare una corrispondenza = in un=20 foglio di stile. In questa seconda pagina, abbiamo definito un CSS=20 incorporato creando un selettore di tipo classe e = assegnado=20 ad esso il nome testorosso:

Il testo del nostro paragrafo sar=E0 ora formattato = secondo i=20 nostri desideri: testo rosso, carattere Arial. dimensione di = 12px.

Lo stesso meccanismo =E8 valido per i selettori di tipo = ID.=20 Ma con una sola fondamentale differenza: =E8 ad essa che = dovete fare=20 riferimento per scegliere se usare una classe o un ID. In un = documento (X)HTML l'attributo id =E8 usato per = identificare in=20 modo univoco un elemento. In pratica, se assegno ad = un=20 paragrafo l'id "testorosso", non potr=F2 pi=F9 usare questo = valore nel=20 resto della pagina. Di conseguenza, l'ID #testorosso=20 dichiarato nel CSS trasformer=E0 solo quel paragrafo = specifico.=20 Una singola classe, al contrario, pu=F2 essere assegnata a = pi=F9=20 elementi, anche dello stesso tipo.

In un documento potr=F2 avere senza problemi questa = situazione:

<p=20 class=3D"testorosso">....</p>
<div=20 class=3D"testorosso">....</div>
<table=20 class=3D"testorosso">...</table>
<p=20 class=3D"testorosso">....</p>

La classe .testorosso presente nel CSS = formatter=E0 allo=20 stesso modo il testo dei paragrafo, del div e della = tabella.

Ma non questa:

Concludendo: una classe consente di superare le = limitazioni=20 intrinseche nell'uso di un selettore di elementi. Se imposto = questa=20 regola:

p {color: red;}

tutti i paragrafi della mia pagina avranno il testo = rosso. E se=20 volessi diversificare? Avere, ad esempio, anche paragrafi = con il=20 testo nero? Sarei prigioniero della regola iniziale. Scrivo = due=20 classi, una per il rosso e una per il nero, le applico di = volta in=20 volta secondo le mie necessit=E0 e il gioco =E8 fatto.

La strategia dovr=E0 dunque essere questa. Se uno stile = va=20 applicato ad un solo specifico elemento usate un ID. = Se=20 invece prevedete di usarlo pi=F9 volte ovvero su pi=F9 = elementi definite=20 nel CSS una classe.

Chiariti i concetti di base, passiamo ad analizzare usi e = sintassi.

Classe

Per definire una classe si usa far precedere il nome da = un=20 semplice punto:

.nome_della_classe

Questa =E8 la sintassi di base. Un selettore classe = cos=EC definito=20 pu=F2 essere applicato a tutti gli elementi di un documento=20 (X)HTML.

Esiste un secondo tipo di sintassi:

<elemento>.nome_della_classe

Esso =E8 pi=F9 restrittivo rispetto alla sintassi = generica. Se=20 infatti definiamo questa regola:

p.testorosso {color: red;}

lo stile verr=E0 applicato solo ai paragrafi che = presentino=20 l'attributo class=3D"testorosso". Anche qui =E8 = importante=20 stabilire un minimo di strategia. Il secondo tipo di = sintassi va=20 usato solo se pensate di applicare una classe ad uno = specifico tipo=20 di elemento (solo paragrafi o solo div, e cos=EC via). Se = invece=20 ritenete di doverla applicare a tipi diversi usate la = sintassi=20 generica.

Una terza possibile modalit=E0 =E8 quella che prevede la=20 dichiarazione di classi multiple:

p.testorosso.grassetto {color:red;=20 font-weight:bold;}

Questa regola applicher=E0 gli stili impostati a tutti = gli elementi=20 in cui siano presenti (in qualunque ordine) i nomi delle = classi=20 definiti nel selettore. Avranno dunque il testo rosso e in = grassetto=20 questi paragrafi:

ma non questo, perch=E8 solo uno dei nomi =E8 presente = come valore di=20 class:

Esempi di questa e delle altre modalit=E0 in questa pagina di esempio.

ID

La sintassi di un selettore ID =E8 semplicissima. = Basta far=20 precedere il nome dal simbolo di cancelletto #:

#nome_id

Con questa regola:

#titolo {color: blue;}

assegniamo il colore blue all'elemento che presenti = questa=20 definizione:

Come per le classi =E8 possibile usare una sintassi con=20 elemento:

p#nome_id

In realt=E0 questa modalit=E0 =E8 assolutamente = superflua. Se l'id =E8=20 univoco non abbiamo alcun bisogno di distinguere l'elemento = cui=20 verr=E0 applicata. Inoltre: la sintassi generica si rivela = pi=F9=20 razionale e utile. Se si dichiara un ID semplice =E8 = possibile=20 assegnarlo a qualunque tipo di elemento. Posso usarlo su un=20 paragrafo, ma se poi cambio idea posso passare = tranquillamente ad un=20 div senza dover modificare il foglio di stile. Usando la = seconda=20 sintassi, invece, sono costretto a rispettare l'elemento = definito=20 nel selettore.

Pagina di esempio anche per = l'ID.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =