CSS/Selettori

I CSS possono contenere diverse indicazioni sullo stile dei vari elementi della pagina, i quali devono essere identificati dai selettori. I selettori possono rifersi a:

• elementi HTML
• ID
• classi

Esistono oltre a questi anche particolari elementi o classi, chiamate pseudo-classi e pseudo-elementi.

[modifica] Elementi HTML

È il caso più semplice di selettore, che definisce la visualizzazione di tutti gli elementi HTML con un determinato nome. Ad esempio:

p { dichiarazioni }

definisce lo stile per tutti gli elementi p (i paragrafi) della pagina.

[modifica] ID e CLASSI

Un id è un selettore CSS che può essere assegnato ad un solo elemento nella pagina, identificato univocamente dall'attributo id. Una classe è un insieme di proprietà che può essere invece assegnato a uno o più elementi HMTL tramite l'attributo class. La sintassi è:

#nome_id { dichiarazioni }
.nome_classe { dichiarazioni }

e, nella pagina HTML, sono richiamate in questo modo:

<elemento_html id="nome_id">...</elemento_html>
<elemento_html class="nome_classe">...</elemento_html>

Per quanto riguarda le classi, è possibile stabilire dichiarazioni diverse a seconda essa sia attribuita ad un elemento piuttosto che ad un'altra:

p.evidenziato { dichiarazioni }
h1.evidenziato { dichiarazioni }

imposta uno stile diverso a seconda che la classe evidenziato sia attributa a elementi H1 e elementi P. È possibile inoltre stabilire sottoclassi, la cui sintassi è

elemento.classe.sottoclasse { dichiarazioni }

Nell'esempio precedente avremmo potuto quindi aggiungere:

p.evidenziato.grassetto { dichiarazioni }

e, nella pagina HTML:

<p class="evidenziato grassetto">...</p>

[modifica] Selettore universale

Esiste anche un selettore * che abbina qualsiasi elemento, classe o id sulla pagina.

[modifica] Raggruppare i selettori

È possibile definire più selettori per una stessa dichiarazione:

selettore1, selettore2, ... {
 dichiarazioni
}

Per esempio:

h1, #mioID, .rosso {
 color: red;
}

[modifica] Le pseudo-classi

Esistono particolari classi che identificano le proprietà di un selettore in base al proprio stato, chiamate pseudo-classi. La sintassi è

elemento:stato { dichiarazioni }

Il loro uso è legato soprattuto ai tag <a>; gli stati definibili per i link sono:

• link indica lo stato di un collegamento non ancora visitato
• visited indica lo stato di un collegamento già visitato
• hover indica lo stato di un collegamento quanto vi passa sopra il mouse. Una volta che il mouse esce dal link, viene ripreso lo stile definito da link o da visited
• active indica lo stato di un collegamento quando l'utente fa clic su di esso

Un altro stato definibile è focus, utilizzato soprattuto per i campi dei form, che identifica lo stato di un elemento che ha ottenuto il focus da parte dell'utente. Una ulteriore pseudo-classe è associata alla lingua dell'utente. Ad esempio:

elemento:lang(it) //definizione per utenti italiani
elemento:lang(en) //definizione per utenti anglosassoni

È interessante la possibilità di definire uno stile dipendente da una pseudoclasse di un altro elemento. Ad esempio:

a#menu:hover div#menudiv {
position: absolute;
width: 300px;
}

Questo codice imposta uno stile per gli elementi div con id menudiv quando il mouse si trova sopra al link del menu.

[modifica] Gli pseudo-elementi

Gli pseudo-elementi identificano elementi specifici ma che non sono identificati da tag o attributi. La sintassi è:

elemento:nome_pseudoelemento { dichiarazioni }

I principali pseudo-elementi sono:

• first-child identifica il primo elemento figlio contenuto nell'elemento
• first-letter identifica la prima lettera del testo contenuto nell'elemento
• first-line identifica la prima riga del testo contenuto nell'elemento
• before e after usati in relazione con la proprietà content

Per approfondire, vedi la pagina CSS/Contenuto generato.

[modifica] Altri tipi di selettori

Basandosi sulla gerarchia degli elementi HTML nella pagina è possibile definire alcuni stili particolari. In questi casi è però meglio che la pagina sia strutturata secondo gli standard XHTML.

• elementi figli: è possibile definire uno stile per tutti gli elementi contenuti in un altro. La sintassi è:

elemento_genitore elemento_figlio { dichiarazioni }

Ad esempio:

h1 b { dichiarazioni }

identifica tutti gli elementi b contenuto anche non direttamente in un elemento h1

• elementi fratelli: il primo elemento allo stesso livello di un altro che abbia quindi lo stesso legame di parentela. La sintassi è

elemento1 + elemento2 { dichiarazioni }

e identifica il primo elemento1 fratello di un elemento2