logo hsb.horse
← Zur Snippets-Übersicht

Snippets

Verwendung des CSS href-Attributselektors

Ein CSS-Snippet zur Verwendung von Attributselektoren auf das href-Attribut des a-Elements, einschließlich Präfix-, Suffix- und Teilübereinstimmung.

Veröffentlicht: • Aktualisiert:
#css #selector #html

Übersetzungen

Englisch Französisch Japanisch Koreanisch Portugiesisch

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

SelektorBedeutung
[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 */