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.
Popularity: 7% [?]
Vuoi essere sempre aggiornato??? Iscriviti ai feed o invia un trackback
Nessun commento, scrivi tu il primo!
Articoli correlati