Utente:Daniele.Brundu/Sandbox01
Quando si utilizzano fogli di stile esterni o si deve far ricorso ai selettori, attraverso i quali è possibile rappresentare gli elementi a cui applicare le proprietà CSS. L'unica occasione in cui non si fa ricorso a tali pattern è nel caso degli stili inline, ossia usando l'attributo style=""
; le proprietà contenute
Conoscere la sintassi dei selettori è fondamentale per avere una buona padronanza dei CSS.
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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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 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, nel documento:
<p class="evidenziato grassetto">...</p>
Selettore universale
[modifica | modifica sorgente]Esiste anche un selettore * che abbina qualsiasi elemento, classe o id sulla pagina.
Raggruppare i selettori
[modifica | modifica sorgente]È 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
[modifica | modifica sorgente]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 davisited
- 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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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 elementoh1
- 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
Ref: [1]