:active :first-child :first-letter :first-line :focus :hover :link :visited
Una pseudoclasse indica uno stato di un elemento e quindi la sua formattazione sarà diversa nel tempo.
Sono disponibili
- :active
- :focus
- :hover
- :link
- :visited
Il loro uso più frequente è associato allo stile dei link
1 2 3 4 |
a:link { color:blue } a:visited { color:red } a:hover { color:lime } a:active { color:yellow } |
In questo modo il link non ancora visitato apparirà blue, poi red, quando il mouse si posa sopra lime e quando viene cliccato yellow.
Attenzione: l’ordine con cui sono specificate nel foglio di stile provoca comportamenti diversi!
Si possono combinare pseudoclassi e classi
1 2 3 4 |
a.evidenziato:hover { color:gray } |
Un link della classe evidenziato al passaggio del mouse apparirà gray
Così come le psuedoclassi indicano uno stato particolare di un elemento, gli pseudoelementi
- :first-letter
- :first-line
indicano una posizione…
Si possono ottenere effetti molto originali
1 2 |
p:first-letter { font-size: 2.5em; color: #000080 } p:first-line { font-size: 1.2em; color: #008080 } |
La prima lettera di ogni paragrafo avrà un certo stile, la prima riga di ogni paragrafo avrà un altro stile.