CSS/Selettori: differenze tra le versioni

== 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:

Questo codice di esempio farà in modo che ogni elemento <code>p</code> (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 <code>id</code>. Una classe è un insieme di proprietà che può essere invece assegnato a uno o più elementi tramite l'attributo <code>class</code>. 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:

&lt;p class="evidenziato grassetto"&gt;...&lt;/p&gt;

== 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 <code>h1</code>, che gli elementi con classe <code>rosso</code> o ID <code>mioID</code> 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 <code>&lt;a&gt;</code>; gli stati definibili per i link sono:

* '''link ''' indica lo stato di un collegamento non ancora visitato

* '''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 <code>div</code> con id <code>menudiv</code> e per i collegamenti con id <code>menu</code> 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

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 <code>b</code> contenuto anche non direttamente in un elemento <code>h1</code>

*'''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