Sélecteur :TARGET
Rôle
Le sélecteur target est une pseudo-classe désigné par la syntaxe :target qui permet de cibler une ancre lorsqu’elle est active.
Note: l’ancre HTML est active lorqu’on clique sur un lien qui pointe cette ancre.
Pour créer une ancre il faut attribuer à l’élément cible un identifiant (avec l’attribut HTML id).
<!-- ancre du lien -->
<p id="ici">Lorem ipsum dolor sit amet</p>
Pour pointer une ancre il faut créer un lien avec une valeur de href qui commence par le caractère dièse #, suivi du nom de l’ancre.
<!-- lien qui pointe l'ancre ici -->
<a href="#ici">vers l'ancre 'ici'</a>
Dans l’exemple ci-dessous, on créé une sorte d’index de paragraphes. Le fait de cliquer sur un lien permet de se diriger vers une ancre qui correspond au paragraphe en question
body{
width: 400px;
}
:target {
background-color: silver;
}
<p><a href="#news1">paragraphe 1</a></p>
<p><a href="#news2">paragraphe 2</a></p>
<p>Cliquez sur un lien pour pointer l'ancre correspondant</p>
<p id="ancre1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil voluptatem, distinctio tempore, suscipit aperiam dignissimos qui
et ad natus quae minus repellendus, at consequuntur voluptate blanditiis.
Provident neque libero reprehenderit.</p>
<p id="ancre2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ratione quibusdam vel laudantium odit repellendus saepe voluptates sequi
tempora asperiores dolores, delectus, in dignissimos amet hic totam
voluptate officia ducimus? Numquam.</p>
Testez vous-même ce sélecteur
Si vous utilisez le sélecteur :target sans l’affecter à un sélecteur, la feuille de style concernera toutes les ancres actives. Mais vous pouvez limiter les ancres actives à un sélecteur bien spécifique.
/* les ancres actives appliqués aux paragraphes seulement */
p:target {
background-color: silver;
}
<p><a href="#ancre1">vers div</a></p>
<p><a href="#ancre2">vers p</a></p>
<p>Cliquez sur un lien pour pointer l'ancre correspondant</p>
<div id="ancre1">div div div div div div</div>
<p id="ancre2">p p p p p p p p p p p p</p>
Résultat : dans cet exemple l’ancre qui pointe la balise DIV n’est pas concernée par le sélecteur p:target.
Version : CSS3
Compatibilité
Le sélecteur target est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9.
