|
a:link {color: blue;}
La regola vuol dire: i collegamenti ipertestuali (<A>) che non siano stati visitati (:link) avranno il colore blue. Da qui risulta piu' chiaro il concetto espresso all'inizio: la pseudo-classe :link definisce lo stile (colore blue) solo in una determinata situzione, ovvero quando il link non e' stato attivato. Appena cio' dovesse avvenire, il testo non sara' piu' blue, perche' la condizione originaria e' venuta meno. Torniamo alla sintassi. La pseudo-classe (tutte iniziano con i due punti) segue senza spazi, l'elemento. Subito dopo, si crea nel modo consueto, il blocco delle dichiarazioni. Una pseudo-classe puo' anche essere associata a selettori di tipo classe. I costrutti possibili sono due. Il primo e' quello sancito nella specifica CSS1. La pseudo-classe doveva seguire la dichiarazione della classe: a.collegamento:link {color: green;} Come va letta questa regola? Avranno il testo verde (green) solo i link non visitati che abbiano come attributo class="collegamento". Sara' verde questo collegamento: <a href="pagina.htm" class="collegamento"> Questo invece no: <a href="pagina2.htm"> A partire dalla specifica CSS2 e' consentita anche questa sintassi: a:link.collegamento in cui la classe segue la pseudo-classe. Significato e risultati sono comunque identici al primo esempio. Il primo tipo di sintassi garantisce una maggiore compatibilita' con i browser piu' datati. Gli esempi e la sintassi presentati valgono per tutte le pseudo-classi. Esempio: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> </head> <style> p:first-child {color:red;} </style> <body> <div> <p>blah blah blah</p> <p>blah blah blah</p> <table> <tr> <td> <p>blah blah blah</p> <p>blah blah blah</p> </td> </tr> </table> </body> </html> |