---
title: Liens
slug: Astuces_CSS/Liens
tags:
  - CSS
translation_of: Web/CSS/Pseudo-classes
---
<p>
</p>
<h3 id="Les_pseudo-classes_d.27ancre"> Les pseudo-classes d'ancre </h3>
<p>Les feuilles de style <a href="fr/CSS">CSS</a> permettent de styler les ancres grâce à 4 pseudo-classes :
</p>
<ul><li> {{ Cssxref(":link") }} pour les liens non visités
</li><li> {{ Cssxref(":visited") }} pour les liens visités
</li><li> {{ Cssxref(":hover") }} pour les liens survolés
</li><li> {{ Cssxref(":active") }} pour les liens actifs
</li></ul>
<p>À cause de la nature en <i>cascade</i> des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de <code>:hover</code> doit être placé après <code>:link</code> et <code>:visited</code>, sinon il serait écrasé par ces 2 derniers styles. De plus, comme <code>:active</code> est défini après <code>:hover</code>, quand un lien est aussi bien <i>survolé</i> que <i>actif</i>, le dernier style est appliqué.
</p>
<h3 id=":hover_quand_il_n.27y_a_pas_de_texte"> <code>:hover</code> quand il n'y a pas de texte </h3>
<p>Normalement, la pseudo-classe <code>:hover</code> est appliquée quand un dispositif de pointage survole le texte du lien. Parfois, quand un lien est placé dans une cellule de tableau ou une barre de menu, verticale ou horizontale, il est nécessaire d'appliquer le style <code>:hover</code> quand le pointeur survole la cellule, là où il n'y a pas de texte.
</p><p>Un contournement pour avoir ce comportement est de styler l'ancre comme un <code>block</code> avec une largeur fixe.
</p>
<pre class="eval">&lt;a style="display: block; width: 150px;" href="#"&gt;Mon lien&lt;/a&gt;
</pre>
<h3 id="Articles_connexes"> Articles connexes </h3>
<ul><li> <a href="fr/Probl%c3%a8mes_soulev%c3%a9s_par_le_pseudo_%c3%a9l%c3%a9ment_hover">Problèmes soulevés par le pseudo élément hover</a> <span>(ajout du traducteur)</span>
</li><li> Propriété CSS {{ Cssxref("display") }}
</li></ul>
<p><span>Interwiki Languages Links</span>
</p>{{ languages( { "en": "en/Useful_CSS_tips/Links" } ) }}