Verwendung des CSS href-Attributselektors

HTML-Beispiel

<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>

Grundlegende Attributselektoren

/* Präfixübereinstimmung: beginnt mit "#" */
a[href^="#"] {
  color: fuchsia;
}

/* Suffixübereinstimmung: endet mit ".org" */
a[href$=".org"] {
  color: orange;
}

/* Teilübereinstimmung: enthält "example" */
a[href*="example"] {
  color: red;
}

/* Kombinierte Bedingung: beginnt mit "https" und endet mit ".jp" */
a[href^="https"][href$=".jp"] {
  color: green;
}

Übersicht der Selektoren

Selektor	Bedeutung
`[attr]`	Attribut ist vorhanden
`[attr="value"]`	Exakte Übereinstimmung mit `value`
`[attr^="value"]`	Beginnt mit `value`
`[attr$="value"]`	Endet mit `value`
`[attr*="value"]`	Enthält `value`

Groß-/Kleinschreibung ignorieren (Flag `i`)

Durch Anhängen von i am Ende wird die Groß-/Kleinschreibung nicht berücksichtigt.

/* Trifft sowohl auf ".pdf" als auch auf ".PDF" zu */
a[href$=".pdf" i]::after {
  content: " (PDF)";
}

Kombination mit `:not()`

/* Nur externe Links (http/https) als Ziel */
a[href^="http"]::after {
  content: " ↗";
}

/* Seiteninterne Links (#) ausschließen */
a[href^="http"]:not([href*="example.com"])::after {
  content: " ↗";
}

Praxisbeispiel: Icons nach Dateityp

/* PDF-Links mit Beschriftung versehen */
a[href$=".pdf" i]::after {
  content: " [PDF]";
  font-size: 0.75em;
  color: #c00;
}

/* Externe Links mit Pfeilsymbol */
a[href^="https://"]:not([href^="https://example.com"])::after {
  content: " ↗";
}

/* Ankerlinks ohne Stil */
a[href^="#"] {
  text-decoration: none;
}

Spezifität

Die Spezifität von Attributselektoren entspricht der von Klassenselektoren: (0, 1, 0).

a[href^="#"] { }   /* (0, 1, 0) — gleichwertig mit einer Klasse */
a.internal { }     /* (0, 1, 1) — Klasse + Element, dieser gewinnt */

Praxishinweis

Dieses Snippet passt gut, wenn dieselbe Operation oder Prüfung im Umfeld von css, selector, html nicht immer wieder neu geschrieben werden soll. Als kleine Hilfsfunktion bleibt aufrufender Code leichter lesbar.

Wenn jedoch Verzweigungen und Voraussetzungen zunehmen, sollte nicht alles in ein einziges Snippet gepackt werden. Getrennte Schritte und klar abgegrenzte Helfer bleiben auf Dauer wartbarer.