I selettori

Quando lo stile è applicato tramite il tag style nella pagina nella sezione <head> oppure quando si applica lo stile attraverso un foglio esterno, abbiamo bisogno di un modo per specificare di che elemento, nella pagina, si sta modificando si sta modificando lo stile. Solitamente, infatti, si utilizza la seguente struttura:

elemento_html {
    proprietà1: valore;
    proprietà2: valore;
    .
    .
}

dove:

elemento_html: nome del tag che si va a modificare. Con nome si intende solo il nome, senza parentesi angolari. Ad esempio se si sta modificando un paragrafo (<p>), elemento_html sar' solo p
parentesi graffe: comprendono tutte le propriet' che si stanno modificando dell'elemento html specificato. Le parentesi vanno aperte dopo il nome dell'elemento e sempre chiuse alla fine delle sue proprietà
interno delle graffe: nomi delle proprietà che si modificano e il valore che si imposta separati dal segno “:”. Ogni proprietà può avere più valori separati da una virgola, ad esempio nel caso di font-family. Ogni riga si conclude con un “;” per segnare la fine di una proprietà e l'inizio della successiva.

In questo esempio, si è fatto uso solo del nome dell'elemento da modificare. Il nome è un caso particolare di selettore CSS. Il ruolo di un selettore è proprio quello di “selezionare” a quale elemento applicare lo stile contenuto nelle parentesi graffe che lo seguono.

Tipi di selettori in CSS

L'albero di un documento

La pagina HTML ha una sua struttura che può essere vista come un albero rovesciato, come capita con l'albero delle cartelle. Infatti, l'elemento <html> contiene tutti gli altri tag ed assume quindi il ruolo di elemento radice. Sotto <html> ci sono <head> e <body>. Sotto <head> troviamo <meta>, <title> ed altri tag riguardanti i metadati della pagina, mentre sotto <body> troviamo tutti gli elementi visibili all'utente, tipo <h1>, <h2>, <p>, <img> e <div>. A loro volta questi possono contenere altri elementi, ad esempio <div> può contenere altri <div>, paragrafi, immagini eccetera.

Selezione tramite tag

Nome dell'elemento HTML

Se si specifica solo il nome del tag HTML, si applica lo stile a tutti i tag corrispondenti nella pagina. Ad esempio, specificando:

p {
    font-size: 10pt;
}

Si sta applicando una dimensione di 10 punti a tutti i paragrafi contenuti nella pagina.

Se poi si desidera applicare una dimensione diversa ad un particolare paragrafo, si può modificare il suo stile con il CSS inline:

<p style="font-size: 5pt">Paragrafo con lo stile diverso</p>

Questa soluzione va bene se ci sono pochi elementi particolari a cui cambiare lo stile rispetto a quello generale applicato a tutti gli altri. Se però si hanno diversi paragrafi (più di uno) di cui si vogliono personalizzare delle proprietà rendendoli uguali tra di loro, ma diversi rispetto allo stile applicato a tutti gli altri è meglio fare uso di altri tipi di selettori piuttosto che applicare lo stile uno ad uno. Il problema si presenta nel momento in cui si vogliono cambiare le proprietà. Se, infatti, abbiamo applicato le stesse proprietà a 10 paragrafi su 100 contenuti nella pagina, il cambiamento di uno (visto che vogliamo che siano uguali tra loro), porterebbe alla ricerca e al cambiamento anche degli altri 9. Questo processo, a lungo andare, può causare problemi derivanti da dimenticanze nella modifica di uno o più dei 10.

Selezione di elementi multipli

Per cambiare le stesse proprietà di elementi corrispondenti a tag diversi si separano i loro nomi tramite una virgola. Esempio: applicare lo stesso colore di sfondo a tutti i div e a tutte le immagini nella pagina:

div, p {
    background-color: cyan;
}

In generale si possono elencare due, tre, quattro o più tag diversi, l'importante è che siano tutti separati da una virgola e disposti prima della parentesi graffa aperta.

Selezione degli elementi contenuti in un altro elemento

Per selezionare tutti i paragrafi figli di un tag, ad esempio <body>, si usa lo spazio:

body p {
    background-color: cyan;
}

Questa tecnica permette di selezionare tutti i paragrafi figli di <body> presenti nella pagina HTML.

Selezione degli elementi figli di un altro elemento

Analizzando l'albero del documento di cui sopra, possiamo vedere che ci sono dei paragrafi figli di <body> e dei paragrafi figli di <div>. Se vogliamo selezionare solo i paragrafi figli diretti di <body>, possiamo usare il carattere maggiore “>”:

body > p {
    background-color: cyan;
}

Selezione solo del primo elemento figlio di un altro elemento

Se per necessità dovessimo selezionare solo il primo elemento figlio di un altro elemento, possiamo usare il carattere più “+”:

div + p {
    background-color: cyan;
}

Classi CSS

Per ovviare al problema di cui sopra, si possono creare delle classi di elementi a cui si va applicare lo stesso stile. Innanzitutto si da un nome alla classe, ad esempio black_theme. I nomi delle classi devono rispettare delle regole:

Niente spazi nel nome;
Nome significativo: deve essere facile risalire al significato del nome dal nome stesso. Chiamando una classe black_theme è facile capire che l'elemento con tale classe farà parte di un insieme di elementi trattati per il tema scuro;
Nome univoco: non ci possono essere due classi che si chiamano allo stesso modo.

In seguito si assegna la classe agli elementi HTML che avranno lo stile uguale:

<p class="black_theme">Primo paragrafo sfondo scuro</p>
<p class="black_theme">Secondo paragrafo sfondo scuro</p>
<div class="black_theme">Div con sfondo scuro</div>

Infine, si richiama la classe nel foglio di stile, facendola precedere da un punto:

.black_theme {
    background-color: black;
}

In questo modo, tutti gli elementi con class="black_theme" avranno lo sfondo scuro.

Elementi con una classe

Oltre che tutti gli elementi aventi una classe, possiamo selezionare solo certi tipi di elementi con una classe. Ad esempio, per indicare tutti i paragrafi aventi la classe black_theme, useremo:

p.black_theme {
    background-color: black;
}

Classi multiple

Un elemento HTML può avere assegnate anche più di una classe diversa. Ad esempio possiamo avere un paragrafo che segue la classe back_black e size_10pt. Entrambe vanno specificate nello stesso attributo class e separate da uno spazio:

<p class="back_black size_10pt">Paragrafo con sfondo nero e dimensione 10 punti</p>

Poi nel foglio CSS si definiscono le regole per questi due stili:

.back_black {
    background-color: black;
}

.size_10pt {
    text-size: 10pt;
}

L'effetto sarà quello di applicare entrambi gli stili specificati nel foglio esterno al paragrafo. Questo procedimento può risultare utile nel caso in cui si vogliono avere più elementi HTML diversi, ad esempio immagini, blocchi div e paragrafi, con uno sfondo nero e più paragrafi che condividano la stessa dimensione. Le due classi si possono quindi applicare separatamente, oppure insieme come nel caso sopra.

Attenzione!

In generale, un elemento HTML può avere zero, una, due, tre o più classi. L'importante è essere consapevoli nella creazione di nuovi classi: se vi sono elementi che è necessario condividano lo stesso stile allora una classe può risultare utile, ma non bisogna esagerare creando centinaia di classi ognuna di pochi attributi per volta. Prima di procedere alla creazione delle classi è utile farsi domande sulla progettazione dello stile, come a cosa una classe può servire e a quanto può essere utile la creazione di una classe, oltre che dove la si vuole utilizzare.

Catene di classi

Nel caso precedente, le due classi erano divise tra di loro. Se vogliamo applicare uno stile specifico a quegli elementi che contengono entrambe le classi, possiamo creare nel foglio CSS una catena di classi:

.back_black.size_10pt {
    color: white;
}

In questo modo stiamo applicando il colore bianco solo a quegli elementi HTML che hanno entrambe le classi back_black e size_10pt specificate in class. Le classi in class però non devono essere necessariamente solo quelle due, possono essercene anche altre.

Identificativi CSS

Applicare lo stile ad un singolo elemento può risultare utile in alcuni contesti. Se vogliamo personalizzare un paragrafo specifico in mezzo ad un insieme di altri paragrafi, possiamo assegnargli un identificativo. Ad esempio, se vogliamo rendere un unico paragrafo rosso possiamo dargli il nome di red_p con l'attributo id:

<p id="red_p">Paragrafo in rosso</p>

Le regole per il nome dato al paragrafo sono le stesse per i nomi delle classi:

Niente spazi nel nome;
Nome che sia significativo:deve essere facile risalire al significato del nome dal nome stesso. Chiamando un paragrafo red_p è facile capire che si tratta di un elemento p che è di colore rosso;
Nome univoco: il nome dato tramite id ad un elemento HTML non può essere uguale a quello contenuto in altri id di altri elementi HTML. In altre parole, l'id di un elemento è suo e suo soltanto.

Una volta assegnato l'id dell'elemento, lo si richiama nel foglio CSS con un carattere cancelletto “#” che lo precede:

#red_p {
    color: red;
}

In questo modo si assegna lo stile solo a quel paragrafo con id=red_p. Questa tecnica offre dei vantaggi rispetto ad applicare lo stile con il CSS inline. Innanzitutto, possiamo racchiudere tutte le regole, anche quella dei singoli elementi, in un foglio CSS esterno, che può essere cambiato anche via codice Javascript. Un esempio è dato dal cambiamento di alcuni siti web dal tema chiaro a quello scuro. Inoltre, si deve tener conto della leggibilità del nostro codice: scrivere molte proprietà per l'elemento tramite CSS inline rende il codice disordinato e meno leggibile. Specificare riga per riga le stesse proprietà in un foglio di stile esterno, invece, fa sì che il codice risulti più pulito e quindi anche più manutenibile in futuro.

Approfondimenti: pseudo-classi

Le pseudo-classi sono classi definite per tutti gli elementi HTML e servono per specificare il comportamento di un elemento che rispetta particolari condizioni definite dalla pseudo-classe.

Le pseudo-classi possono essere richiamate con due punti “:” posti dopo il nome del tag nel foglio di stile CSS. Ad esempio per selezionare tutti i paragrafi che sono gli ultimi figli di un altro elemento HTML si usa:

p:last_child {
    background-color: black;
}

Le pseudo-classi possono seguire qualsiasi tipo di selettore CSS, che sia un elemento HTML normale (come sopra), un elemento HTML a cui è stata applicata una particolare classe o un elemento HTML con un certo identificativo.