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 riferirsi a:

• elementi
• ID
• classi

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

Tag

Il caso più semplice di selettore, che definisce gli attributi CSS per tutti gli elementi con un determinato nome, è quello di un semplice tag. In questo caso gli attributi verranno applicati ogni volta che quel tag è presente nel documento. Ad esempio:

p { border: 1px dotted blue; }

Questo codice di esempio farà in modo che ogni elemento p (i paragrafi) della pagina abbia un bordo blu tratteggiato di un pixel di spessore.

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 tramite l'attributo class. La sintassi è:

#nome_id { dichiarazioni }
.nome_classe { dichiarazioni }

e, nel documento, sono richiamate in questo modo:

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

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 attribuita 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, nel documento:

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

Selettore universale

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

Raggruppare i selettori

È possibile definire più selettori per una stessa dichiarazione:

selettore1, selettore2, ... {
 dichiarazioni
}

Per esempio:

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

Con questo codice, sia i tag h1, che gli elementi con classe rosso o ID mioID avranno il testo di colore rosso.

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 soprattutto 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 soprattutto 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 e per i collegamenti con id menu quando il mouse vi si trova sopra.

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 CSS/Contenuto generato.

Altri tipi di selettori

Basandosi sulla gerarchia degli elementi nel documento è possibile definire alcuni stili particolari.

• 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