:target

  • Raccourci de la révision : CSS/:target
  • Titre de la révision : :target
  • ID de la révision : 355233
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La pseudo-classe CSS :target permet de modifier le style CSS de l'élément vers lequel pointe un lien.

Explication : Dans un lien qui pointe vers une ancre (par exemple http://www.monsite.exemple/index.html#section_1), la cible est section_1 donc quand on arrivera dessus, le style CSS sera modifié pour cette cible.

Exemple

*:target {
background: gold;
color: red;
}

/* Lorsque l'on cliquera sur le lien, la cible aura un fond couleur or et le texte sera de couleur rouge */

Spécifications

Compatibilité des navigateurs

Chrome Firefox (Gecko) Internet Explorer Opera Safari
2.0 1.0 (1.7) 9.0 9.5 1.3

 

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La <a href="/fr/docs/CSS/Pseudo-classes" title="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>:target</code> permet de modifier le style CSS de l'élément vers lequel pointe un lien.</p>
<p><u>Explication :</u> Dans un lien qui pointe vers une ancre (par exemple <code><a class="external" href="http://www.monsite.exemple/index.html#section_1" rel="freelink">http://www.monsite.exemple/index.html#section_1</a></code>), la cible est <code>section_1</code> donc quand on arrivera dessus, le style CSS sera modifié pour cette cible.</p>
<h2 id="Exemple">Exemple</h2>
<pre>
*:target {
background: gold;
color: red;
}

/* Lorsque l'on cliquera sur le lien, la cible aura un fond couleur or et le texte sera de couleur rouge */
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo" title="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS 3 Selectors</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>2.0</td>
        <td>1.0 (1.7)</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>1.3</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
Revenir à cette révision