Lez.16 - Corso Base Css

Le Pseudo-Classi in un foglio di stile Css

Le Pseudo-Classi

Una pseudo classe non si riferisce ad un tipo particolare di elemento nè ad una categoria di elementi che devono avere lo stesso stile.

La pseudo classe viene definita per creare uno stile css per un elemento che si trova in un determinato stato.

In conclusione, per merito delle pseudo-classi abbiamo la possibilità di dare uno stile ad un elemento al verificarsi di certe condizioni.

Sintassi:
selettore:pseudo-classe {blocco delle dichiarazioni;}

Vediamo la sintassi con elementi e selettori.

Pseudo-classe con elemento:
a:link {color: red;}

Pseudo-classe con elemento e tag:
p a:link {color: red;}

Pseudo-classe con selettore di id:
#id:link {color: red;}

Pseudo-classe con selettore di classe:
a.classe:link {color: red;}
Ora vediamo le applicazioni delle pseudo-classi
Sintassi:

a:link (collegamento) colora il testo dei collegamenti che sono ancora da cliccare

a:visited (visitato) colora il testo dei collegamenti già visitati

a:hover (svolazzare) colora il testo al passaggio del mouse

a:active (attivo) colora il testo mentre si clicca sul testo
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Pseudo-classi</title>
  <meta charset="utf-8">
  <style type="text/css">
    a:link {
	    color: green;
    }
    a:visited {
	    color:magenta;
    }
    a:hover {
	    color: red;
    }
    a:active {
	    color: white;
    }
    h1:hover {
	    background-color: yellow;
	    color: red;
    }
    h1:active {
	    color: white;
    }
    .pippo1:hover {
	    background-color: #FC0FC0;
    }
    .pippo1:active {
	    color: white;
    }
    #pippo2:hover {
	    background-color: #FF6347;
    }
  </style>
 </head>
 <body>			    
   <h1>Pseudo-classi</h1>
   <p class="pippo1">Paragrafo 1</p>
   <p><a href="percorso_ad_un_file_arbitrario">Collegamento 1</a></p>
   <p id="pippo2">Paragrafo 2</p>
   <p><a href="percorso_ad_un_file_arbitrario">Collegamento 2</a></p>
 </body>               
</html>