Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

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é

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera

Le sélecteur target est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9.

A voir aussi

:root 
:not(selector)
:empty 
:lang(langage)

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »