logo hsb.horse
← Retour à l’index des snippets

Snippets

Sélecteurs d'attribut CSS pour href

Un snippet CSS utilisant des sélecteurs d'attribut sur l'attribut href des éléments a, avec correspondance de préfixe, de suffixe et partielle.

Publié: • Mis à jour:
#css #selector #html

Traductions

Allemand Anglais Japonais Coréen Portugais

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électeurSignification
[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 */