Lo pseudo selettore :target | CSS3

La pseudo-selettore :target è una delle caratteristiche più interessanti dei CSS3, consente infatti di rendere un elemento “target” di un altro e cambiarne le proprietà css al momento della targetizzazione. Ovvero, attraverso l’utilizzo del simbolo “#” possiamo associare l’elemento identificatore con il suo bersaglio. Vediamo subito l’esempio per chiarire meglio il concetto:

Come utilizzare :target

Premesso che il supporto per questa proprietà è offerto solo dai browser moderni e da IE9+, potremo stilizzare :target così come facciamo per la pseudo-classe :hover o :focus. Rispetto a queste ultime, :target è utilizzata durante l’interazione tra elementi della nostra pagina web. Vediamo il markup che ci interessa della demo:

<div id="main">
	<ul>
		<li><a href="#id1">Blocco 1</a></li>
		<li><a href="#id2">Blocco 2</a></li>
		<li><a href="#id3">Blocco 3</a></li>
		<li><a href="#id4">Blocco 4</a></li>
	</ul>
	<p class="evidenzia" id="id1">Mutley, you snickering, floppy eared hound. When courage is needed, you're never around. Those medals you wear on your moth-eaten chest should be there for bungling at which you are best. So, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon. Howwww! Nab him, jab him, tab him, grab him, stop that pigeon now.
	</p>
	<p class="evidenzia" id="id2">
	There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.</p>
	<p class="evidenzia" id="id3">
	This is my boss, Jonathan Hart, a self-made millionaire, he's quite a guy. This is Mrs H., she's gorgeous, she's one lady who knows how to take care of herself. By the way, my name is Max. I take care of both of them, which ain't easy, 'cause when they met it was MURDER!</p>
	<p class="evidenzia" id="id4">
	Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>
</div>

Come potete notare immediatamente, la corrispondenza tra elemento identificatore ed elemento target è stabilita dall’utilizzo del cancelletto “#” che permette di correlazionare gli elementi esattamente come si fa utilizzando le ancore interne ad una pagina.
E’ necessario però vedere che cosa accade a livello di CSS per capire il tutto:

#main {
     width: 960px;
     margin: 0 auto;
     margin-top:20px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
     padding: 30px;
     border: 1px solid #adaa9f;
    -moz-box-shadow: 0 2px 2px #9c9c9c;
    -webkit-box-shadow: 0 2px 2px #9c9c9c;
    background:#fff;
}
ul, p {
     margin-bottom: 10px;
}
p {
    padding: 10px;
    border: 1px solid #eaeaea;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
p.evidenzia:target {
    border-color: #9c9c9c;		
    -moz-box-shadow: 0 0 4px #9c9c9c;
    -webkit-box-shadow: 0 0 4px #9c9c9c;
    box-shadow: 0 0 4px #9c9c9c;
    background-color:#fd0;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#ffdd00, EndColorStr=#ffd200); /* IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffdd00), to(#ffd200));
    background: -moz-linear-gradient(top, #ffdd00, #ffd200);
}

Notiamo che, quando un elemento paragrafo (nel nostro caso), con classe .evidenzia diventa “target” di un atro elemento, le sue proprietà CSS cambiano secondo le direttive che gli diamo. Finora tutto ciò era possibile solo attraverso l’aggiunta-rimozione di classi specifiche tramite javascript. Ora non resta che sperimentare ed attendere che la compatibilità per questa proprietà diventi uno standard.

Il supporto dei browser

Lo pseudo selettore target è supportato da:

• Mozilla Firefox
• Google Chrome
• Safari
• Opera
• Internet Explorer 9+