Pseudo-classi

La proprietà è supportata dai browser Gecko-based. In Explorer e Opera vedrete il primo paragrafo nero.

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

#div1 {
color: Black;
font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

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

Primo paragrafo: rosso e grassetto perchè primo elemento figlio di #div1.

Secondo paragrafo: nero

Terzo paragrafo: nero

:link

Usare la pseudo-classe :link. Il link non visitato è rosso e non sottolineato.

Codice:

#div2 a:link {
color: Red;
text-decoration: none;
}

:visited

Usare la pseudo classe :visited. Il link visitato è verde e non sottolineato.

Codice:

#div2 a:visited {
color: Green;
text-decoration: none;
}

Usare la pseudoclasse :hover. Al passaggio del mouse il link diventa blue e sottolineato.

Codice:

#div2 a:hover {
color: Blue;
text-decoration: underline;
}

Usare la pseudoclasse :active. Mentre il tasto sinistro è premuto il link è viola e sottolineato.

Codice:

#div2 a:active {
color: Purple;
text-decoration: underline;
}

Su Explorer Win non noterete nulla, ma quando il campo di testo riceve il focus, il colore di sfondo diventa giallo.

Codice:

#div3 input:focus {
background-color: Yellow;
}