I selettori CSS

Link copiato negli appunti

In questo articolo impareremo a conoscere e ad usare i selettori css elementari, il cui supporto è esteso ai maggiori browsers attualmente presenti.

Non solo contenuto e presentazione

La definizione più conosciuta dei css e diffusa dei fogli di stile è "sono la
separazione tra contenuto e presentazione". Il contenuto è nella pagina html, mentre la presentazione è compito dei fogli di stile. Ma c'è una terza variabile che sfugge da questa definizione a cui molti appassionati ed esperti di webdesign devono rendere conto: la struttura.

La struttura è inseparabile dal contenuto, ed è l' unico modo per consentirne la presentazione. In sostanza è l' anello di unione tra contenuto e presentazione. Una buona conoscenza dell'HTML e la comprensione approfondita dei selettori css e il loro uso proprio permettono di strutturare bene pagine web, sia dal punto di vista del contenuto che della presentazione. Fatta questa premessa, possiamo iniziare il nostro viaggio nel mondo dei selettori.

Le regole dei fogli di stile

Una regola in un foglio di stile è costituita da uno o più selettori e un insieme di proprietà e relativi valori, espressi nella seguente forma:

selettore{
    proprietà: valore;
    proprietà: valore;
    proprietà: valore;
}

I selettori indicano a quali elementi in una pagina html la regola verrà applicata, le proprietà e i relativi valori si curano della presentazione di tali elementi.

Raggruppamento

È molto utile e di uso comune assegnare una regola a più selettori senza dover replicare
il codice css che la riguarda. Basta riportare, prima della graffa aperta, tutti i selettori
coinvolti separati da una virgola. Esempio:

selettore1, selettore2, selettore3 {
    proprietà: valore;
    proprietà: valore;
    proprietà: valore;
}

Se il raggruppamento totale ha degli indubbi vantaggi, il raggruppamento parziale è da usare con cautela e solo sotto alcune semplici condizioni, cioè nel caso in cui le proprietà in comune siano una maggioranza significativa e le proprietà differenti siano al massimo una o due, e vengano specificate nel foglio di stile immediatamente sotto la regola di raggruppamento. Ecco un esempio in cui il raggruppamento parziale è accettabile:

selettore1, selettore2 {
    proprietà: valore;
    proprietà: valore;
    proprietà: valore;
    proprietà: valore;
}
selettore1 {
    proprietà-x: valore;
}
selettore2 {
    proprietà-x: valore;
}

Selettore universale (universal selector)

Le regole specificate attraverso il selettore universale verranno applicate a tutti gli
elementi, o ad una sottocategoria specifica ottenuta combinando altri selettori.
Il selettore universale, sebbene molto potente, non andrebbe utilizzato se non in casi molto
specifici, in quanto ci sono modi per ottenere lo stesso risultato sfruttando l' ereditarietà
delle proprietà di cui parleremo in seguito. L' esempio seguente attribuisce colore del testo
verde a tutti gli elementi di una pagina html:

* {
color: green;
}

Selettore di tipo (type selector)

Le regole specificate tramite selettori di tipo verranno applicate a tutti le istanze di elementi
associati ad un dato tag. In sostanza attraverso i selettori di tipo è possibile attruibuire
una regola di presentazione per i tag HTML. La regola dell' esempio seguente consentirà di mostrare
tutti i paragrafi di una pagina html con sfondo giallo e testo blu, salvo l' uso di altri selettori
che riguardano i paragrafi.

p {
    background-color: yellow;
    color: blue;
    }

Nota: è buona norma per produrre css leggeri e più facilmente leggibili e controllabili usare
il minor numero di proprietà nei selettori di tipo. Questo per due ragioni: l' ereditarietà di alcune proprietà (di cui parleremo
nel dettaglio in seguito) e perchè le proprietà specifiche definite nei selettori di tipo andranno ridefinite in selettori
più specifici, causando appesantimento del codice css e difficoltà di editing. Quello che si dovrebbe specificare attraverso
un selettore di tipo è il comportamento di default, espresso attraverso proprietà minime.

Selettore di classe (class selector)

E' possibile assegnare mediante html e in particolare tramite l' attributo class
una o più classi ad un dato elemento. Vediamo come:

<h3 class="warning">Attenzione: strada ghiacciata sulla statale!</h3>
<p class="consiglio importante">Si consiglia di montare le catene da neve</p>

In questo esempio all' header viene assegnata la classe "warning" mentre al paragrafo successivo
vengono assegnate le classi "consiglio" e "importante". Vediamo com' è possibile definire una classe
nel foglio di stile. Anticipo che le classi vengono rappresentate mediante la notazione .nomeclasse

Classi di uso generico

Questo tipo di classe è applicabile a tutti gli elementi, e si indica attraverso il selettore universale,
che può essere anche omesso. Vediamo come potrebbe essere la classe "warning" espressa sopra:

*.warning{ color: red }

Oppure indifferentemente, senza il selettore universale ma sempre anteponendo al nome della classe il punto:

.warning{color: red }

Si noti che la classe warning può a questo punto essere attribuita a qualsiasi tipo e numero di elementi.

Classi specifiche per tag

Talvolta si ha la necessità di associare una classe ad un particolare tag e solo a quello. In questo caso basta
anteporre davanti al punto il nome del tag. Esempio:

p.consiglio{ font-style: italic}

Si noti che in tal caso è possibile attribuire la classe "consiglio" solo ai tag "p", quindi con una regola come
quella sopra indicata non avrà effetto nella formattazione del testo della seguente porzione di codice html:

<div class="consiglio">Se guidi, bevi con moderazione o evita del tutto.</div>

Nota: Sebbene all' inizio l' uso di classi sia seducente e apparentemente vantaggioso,
il mio consiglio è di non abusarne e di usarle con intelligenza e parsimonia. Sovente ci sono tag html che servono
allo scopo (per citarne alcuni: <strong>, <em>, <address>, i tag <h1>.. <h6> eccetera).

Qualora non ci fosse un tag adeguato a svolgere un ruolo, si può sovente ricorrere all' uso di altri selettori, quali ad esempio
il selettore discendente. Se anche in tale caso non fosse possibile trovare un' alternativa logica e ragionata,
allora si può ricorrere senza esitazione all' uso delle classi.

Sulla scelta dei nomi delle classi

A volte ci si trova in difficoltà nel nominare una classe.
Il mio invito è di usare nomi significativi per le classi. Sono da evitare nomi di tag html e di proprietà css.
Inoltre i nomi delle classi non dovrebbero tradirne la presentazione, ma piuttosto evidenziarne lo scopo per agevolare la comprensione del foglio di stile e dell' html.

Esempi pessimi dell' uso di classi sono:

p.arial10px{ font: 10px arial}
p.testorosso{ color: red}

Ecco un' alternativa migliore:

p.testopiccolo{ font: 10px arial,sans-serif}
p.warning{ color: red}

Selettore di ID (id selector)

I selettori di ID permettono di assegnare una regola css ad un unico elemento
nella pagina html che è specificato attraverso l' attributo id. Esempio di codice
html per associare un id a un elemento:

La relativa regola css va specificata anteponendo al nome dell' id il cancelletto.
Si può specificare un selettore id nei seguenti tre modi:

*#menu{ /*proprietà e valori*/}    oppure
#menu{ /*proprietà e valori*/}    oppure
div#menu{ /*proprietà e valori*/}

Anche in questo caso il selettore universale (*) davanti è opzionale. Decisamente
il secondo modo di indicare i selettori di id è il più usato, ma vorrei spendere due
parole sul terzo modo, cioè quello ottenuto anteponendo all' id il tag associato. In
questo caso l' applicabilità del selettore id è specifica solo per il tag indicato.
Come abbiamo già detto, un elemento con id deve essere unico in una pagina html. E se
penso che sia unico, penso prima di tutto alla sua natura, e prefirisco per leggibilità
riportarla anche nel css. Per questo motivo è il mio modo preferito di specificare
i selettori di id.

Il primo passo verso la struttura

Come abbiamo detto l' uso di attributi id in una pagina html consente di nominare
e identificare univocamente un elemento. L' indubbio vantaggio che ne risulta è che è possibile
assegnare un id ad ogni "macrosezione" di una pagina, e curarne aspetto e posizione
attraverso i fogli di stile. Credo che almeno il 95% degli id di tutte le pagine web
sia attribuito a dei <div>, ed è così che deve essere per svariati
motivi. Il primo è che i div sono elementi block-level liberi da differenze di
presentazione di default da parte dei browsers, in quanto hanno margini, bordi e padding
a zero anche in una pagina html senza relativo css. Il secondo motivo è che sono elementi
block-level, e possono contenere ogni sorta di elemento.

Sulla scelta dei nomi degli id

L' uso degli id ci consente di strutturare una pagina, e di conseguenza di curarne
al meglio la presentazione come abbiamo accennato in apertura di articolo.
La scelta dei nomi degli id va ponderata, e questi non dovrebbero tradire nè posizione
nè presentazione, ma solo suggerire una sezione o uno scopo. Anche in questo caso nomi di tag html
o proprietà css sono da evitare.
Sono ormai di uso comune termini inglesi per le varie sezioni di una pagina html
esperessi attraverso gli id. Eccone alcuni:

div#page: il box che contiene l' intera pagina html
div#header: la testata di una pagina web
div#navbar: la barra di navigazione
div#navigation: la sezione di navigazione
div#news: la sezione dedicata alle news
div#contents: la parte centrale dei contenuti
div#links: la sezione dei link
div#footer: il piè pagina

Classi contro id

Da quanto detto sopra, dovrebbe essere evidente la differenza sostanziale tra le
classi e gli id. Ma è un concetto che può risultare difficile, soprattutto all' inizio
dello studio dei css, e la comprensione della loro diversità è fondamentale.
Ora che li abbiamo presentati entrambi, possiamo riepilogare:

Le classi servono per definire una tipologia di elementi, cioè per attribuire
uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche
e funzionalità comuni di una pagina html
Gli id servono per definire un' elemento unico in una pagina, con un unico e
preciso scopo, nella maggiorparte dei casi tale scopo è determinare una sezione
in una pagina html.

Selettore discendente (descendant selector)

Il selettore discendente consente di combinare due o più selettori a catena, definendo
una visibilità della regola css molto selettiva. Coinvolge due o più selettori separati da
spazi:

selettore1 selettore2{
    proprietà: valore;
    proprietà: valore;
    proprietà: valore;
    proprietà: valore;
    }

La regola sopra è rivolta agli elementi individuati da selettore2 contenuti
nel codice html in elementi individuati da selettore1.
I due selettori che compongono un selettore discendente possono essere selettori complessi,
quali selettori di classe, di id o discendenti stessi. Alcuni esempi pratici serviranno a capire meglio:

p em { /*...*/}: Questa regola verrà applicata a tutte le porzioni di testo
enfatizzato racchiuse in un paragrafo.
div#header h2 { /*...*/}: Verrà applicata agli elementi <h2> inclusi
nella sezione della pagina individuata dall' id header.
div.news p{ /*...*/}: Tutti i paragrafi inseriti nei div con classe news verranno
presentati attraverso questa regola.
div#navigation ul#mainindex a { /*...*/}: In questo caso la regola è rivolta a tutti i link
della lista individuata dall' id mainindex e contenuta nella sezione navigation della pagina.

Il secondo passo verso la struttura

Dai brevi esempi indicati sopra dovrebbe essere chiara l' indubbia potenza del selettore discendente, che
consente di attribuire una regola css a una tipologia ristretta e selezionata di elementi contenuti in una ben precisa
porzione di codice html. L' uso appropriato di selettori discendenti consente di risparmiare molto spesso l' uso di
selettori di classe (soprattutto) e di id, alleggerendo il codice css ed evitando l' uso eccessivo di attributi di
classe e di id in una pagina html.

Conclusioni

Arrivato a questo punto il lettore dovrebbe disporre di una buona parte delle nozioni necessarie all' uso dei
selettori css. Rimangono ancora da trattare le pseudo-classi dinamiche e i tutti i selettori non supportati attualmente
da Internet Explorer 5.x o 6.
Li vedremo tra breve in altri articoli. Inoltre, per una buona conoscenza dei fogli di stile e per un uso adeguato
delle proprietà css, ci sono alcune cose interessanti di cui parleremo nei prossimi appuntamenti: l' ereditarietà,
la specificità dei selettori, la cascata e i meccanismi di risoluzione dei conflitti tra proprietà. Alla prossima.

Indice lezioni