Sélecteurs d'attribut CSS pour href

Exemple HTML

<ul>
  <li><a href="#top">TOP</a></li>
  <li><a href="https://developer.mozilla.org">mozilla</a></li>
  <li><a href="https://example.com">example</a></li>
  <li><a href="https://www.yahoo.co.jp">yahoo</a></li>
</ul>

Sélecteurs d’attribut de base

/* Préfixe : commence par "#" */
a[href^="#"] {
  color: fuchsia;
}

/* Suffixe : se termine par ".org" */
a[href$=".org"] {
  color: orange;
}

/* Correspondance partielle : contient "example" */
a[href*="example"] {
  color: red;
}

/* Condition combinée : commence par "https" et se termine par ".jp" */
a[href^="https"][href$=".jp"] {
  color: green;
}

Liste des sélecteurs

Sélecteur	Signification
`[attr]`	L’attribut existe
`[attr="value"]`	Correspondance exacte avec `value`
`[attr^="value"]`	Commence par `value`
`[attr$="value"]`	Se termine par `value`
`[attr*="value"]`	Contient `value`

Ignorer la casse (flag `i`)

Ajouter i à la fin pour ne pas distinguer majuscules et minuscules.

/* Correspond à ".pdf" comme à ".PDF" */
a[href$=".pdf" i]::after {
  content: " (PDF)";
}

Combinaison avec `:not()`

/* Cible uniquement les liens externes (http/https) */
a[href^="http"]::after {
  content: " ↗";
}

/* Exclut les liens internes (#) */
a[href^="http"]:not([href*="example.com"])::after {
  content: " ↗";
}

Exemple pratique : icônes par type de fichier

/* Ajouter un libellé aux liens PDF */
a[href$=".pdf" i]::after {
  content: " [PDF]";
  font-size: 0.75em;
  color: #c00;
}

/* Icône flèche pour les liens externes */
a[href^="https://"]:not([href^="https://example.com"])::after {
  content: " ↗";
}

/* Pas de style pour les liens d'ancrage */
a[href^="#"] {
  text-decoration: none;
}

Spécificité

La spécificité d’un sélecteur d’attribut est identique à celle d’un sélecteur de classe : (0, 1, 0).

a[href^="#"] { }   /* (0, 1, 0) — équivalent à une classe */
a.internal { }     /* (0, 1, 1) — classe + élément, celui-ci l'emporte */

Note pratique

Ce snippet convient bien quand on ne veut pas réécrire la même opération ou la même vérification autour de css, selector, html. Le garder sous la forme d’un petit utilitaire rend l’intention plus lisible côté appelant.

En revanche, si les branches et les préconditions s’accumulent, mieux vaut ne pas tout tasser dans un seul snippet. Séparer la procédure, le helper et les responsabilités rend l’ensemble plus simple à maintenir.