Vai ai contenuti

LAU



Home > Proprietà CSS2 > Proprietà per le pseudo-classi


Proprietà CSS2

Proprietà per le pseudo-classi

Tabella riassuntiva e descrittiva delle funzionalità, valori e supporto dei browser relativa alla specifiche dei CSS2 per la gestione delle pseudo-classi.

  • NN: indica da quale versione di Netscape Navigator viene supportata la proprietà.
  • IE: indica da quale versione di Internet Explorer viene supportata la proprietà.
  • MF: indica da quale versione di Mozilla Firefox viene supportata la proprietà.
Proprietà IE NN MF
:active 4.0 - 1.0
:focus - - -
:hover 4.0 7.0 1.0
:link 3.0 4.0 1.0
:visited 3.0 4.0 1.0
:first-child - 7.0 1.0
:lang - - 1.0

Esempi dimostrativi delle funzionalità di alcune proprietà per le pseudo-classi:

torna alla lista completa delle proprietà

:hover, :focus :active

Le proprietà :hover, :focus e :active sono pseudo-classi dinamiche poichè rispondono ad azioni compiute dall'utente, come il posizionamento del puntatore del mouse sopra un oggetto (:hover), la selezione di un elemento (:focus), l'attivazione di un oggetto (:active).

div a:hover{
color: blue;
text-decoration: underline;
}
div a:active{
color: purple;
text-decoration: underline;
}

In questo esempio al passaggio del mouse il link diventa blue e sottolineato; mentre il tasto sinistro è premuto il link è viola e sottolineato.

Le proprietà :hover,:focus e :active sono supportate da Internet Explorer 6 e precedenti per Windows solo quando applicate ai collegamenti.

torna alla tabella

:link, :visited

Tramite le pseudo-classi :link e :visited è possibile distinguere un collegamento non ancora visitato da uno già visitato.

div a:link{
color: red;
text-decoration: none;
}
div a:visited{
color: green;
text-decoration: none;
}

La prima regola si applica a tutti i collegamenti non visitati, mentre la seconda regola si applica a tutti i collegamenti già visitati.

torna alla tabella

:first-child

La pseudo-classe :first-child determina le proprietà di presentazione del primo figlio di ogni occorrenza di un elemento.

Codice HTML:

<div id="div1">
<p>Primo paragrafo.....</p>
<p>Secondo pargrafo: nero</p>
<p>Terzo paragrafo: nero</p>
</div>

CSS:

#div1{
color: black;
font: 12px Verdana, Geneva, Arial, Helvetica;
}


#div1 p:first-child{
color: red;
font-weight: bold;
}

In questo esempio il primo paragrafo sarà rosso e grassetto perchč primo elemento figlio di #div1, secondo e terzo paragrafo nero.

La pseudo-classe :first-child non funziona correttamente con Internet Explorer 6 e precedenti per Windows e con Opera.

torna alla tabella

:lang

La pseudo-classe :lang serve a differenziare i vari elementi in base all'attributo lang e prevede anche che sia specificata anche la lingua indicata nell'attributo stesso.

Codice HTML:

<p lang="en">Questo paragrafo è in 
inglese.</p>

CSS:

p:lang(en){
font-weight: bold;
}
La pseudo classe :lang è supportata solamente dal browser Mozilla Firefox.

torna alla tabella

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]