Le pseudo-classi e gli pseudo-elementi | Guida ai fogli di stile

domenica 23 novembre 2008

Web agency
Realizzazione siti web

Risorse

Sfondi per siti web

Menù

Login Form

Home

Css

Guida ai fogli di stile

Le pseudo-classi e gli pseudo-elementi

Le pseudo-classi e gli pseudo-elementi

Scritto da Vincenzo

Pseudo-classi

Le pseudo-classi servono a specificare le caratteristiche di un determinato elemento quando esso si trova in un determinato stato, esse non possono mai essere dichiarate da sole ma devono far riferimento ad un selettore.

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

Nell’esempio precedente, la pseudo-classe che segue il selettore ‘a’ serve a specificare lo stato del collegamento ipertestuale, (in questo caso è nella condizione normale) e quindi i collegamenti non ancora visitati saranno di colore rosso e non avranno alcuna sottolineatura, questa sintassi si applica solo per i tag <a> che contengono l’attributo “href”. I link inoltre, possono avere anche altre condizioni:

a:visited /*i collegamenti già visitati*/



a:active /*Il collegamento attivo */



a:hover /*il collegamento quando viene passato il puntatore del mouse su di esso*/

Con queste poche regole abbiamo la possibilità di dare più interattività alla pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" lang="it">



<head>



<title>Pseudo-classi</title>



<style type="text/css">



<!--



body{background-color:black}



a:link{color:red; text-decoration:none;background-color:yellow;border:2px groove yellow;padding:5px}



a:hover{color:yellow;text-decoration:underline;background-color:black; border:2px groove red;padding:5px}



h2{color:orange;font-weight:bold}

-->



</style>



</head>



<body>



      <h2>Pseudo classi</h2>



      <br /><br />



      <a href=”#” title=”Pseudo-Classi”>Passa quì con il mouse</a>



</body>



</html>

La pseudo-classe può anche essere associata a selettori di tipo classe per fare in modo che solo alcuni collegamenti rispettino determinate regole, nell’esempio successivo solo i collegamenti di classe “rosso” assumeranno determinate caratteristiche:

a.rosso:link{color:red;font-weight:bold}

oppure

a:link.rosso{color:red;font-weight:bold}

Le sintassi sono entrambi funzionanti, ma dato che la seconda sintassi è nata dalla specifica CSS2 non risulta compatibile con i browser più datati. Le dichiarazioni vanno richiamate in questo modo:

<a class=”rosso” href=”pagina.html”>Collegamento rosso</a>

Un’altra pseudo-classe molto interessante è :frist-child che purtroppo però non è supportata da tutti i browser (riescono ad interpretarla ad esempio Mozilla, Netscape 6 e 7 e Explorer 5 Mac). Essa formatta l’elemento che è primo discendente diretto di un altro elemento:

p:first-child {color:yellow;}

Assegna il colore giallo solo al primo elemento figlio di un altro elemento:

<div>



<p>Testo formattato e quindi di colore giallo</p>



<p>Testo non formattato</p>



</div>

Pseudo-elementi

Sono supportati solo dai browser di nuova generazione e servono per variare le caratteristiche di tutte quelle parti del documento che non sono rappresentate da nessun tag in particolare.

:before

Con questo pseudo-elemento abbiamo la possibilità di inserire nel documento un contenuto che non è presente nello stesso, tale contenuto verrà inserito prima dell’elemento definito nel selettore, se ad esempio vogliamo inserire una determinata stringa prima di ogni paragrafo la sintassi è la seguente:

p:before{content:”Ciao”}

:after

E complementare a :before la differenza sta nel fatto che invece di inserire il contenuto prima dell’elemento definito dal selettore lo inserisce dopo.

:frist-line

Imposta la prima riga di un elemento che contiene una stringa di testo, se vogliamo ad esempio che la prima riga di ogni paragrafo sia di colore “green” ci basterà scrivere:

p:frist-line{color:green;}

:frist-letter

Simile al precedente, solo che la formattazzione verrà applicata solo alla prima lettera e non a tutta la riga.