Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >Attributselektor ([attribut])

Attributselektor ([attribut])

[Attribut] [Attribut="Wert"] [Attribut^="Anfang" i]

Wählt Elemente danach, ob sie ein Attribut haben, oder nach seinem Wert. Er eignet sich für Typen von Formularfeldern, Links auf Dateien und andere Websites oder einen in data-*-Attributen gespeicherten Zustand. Die Spezifität ist dieselbe wie bei einer Klasse, 0-1-0.

Werte

  • [Attribut] – das Element hat das Attribut, mit beliebigem Wert (auch leer).
  • [Attribut="Wert"] – der Wert stimmt genau überein.
  • [Attribut^="Anf"] – der Wert beginnt mit; [Attribut$="Ende"] – endet mit; [Attribut*="Teil"] – enthält an beliebiger Stelle.
  • [Attribut~="Wort"] – eines der durch Leerzeichen getrennten Wörter (wie die Klassen in class).
  • [Attribut|="en"] – genau en oder beginnend mit en- (Sprachcodes).
  • i vor der schließenden Klammer – ohne Rücksicht auf Groß- und Kleinschreibung: [href$=".pdf" i]. Das Gegenstück s (immer mit Rücksicht auf die Schreibweise) unterstützen laut MDN Firefox ab 66 und Safari ab 27, Chrome noch nicht (Stand Oktober 2026).

Beispiele

Der Zustand einer Aufgabe im Attribut data-state – das Aussehen richtet sich nach dem Wert, zusätzliche Klassen sind nicht nötig:

<ul class="tasks">
  <li data-state="done">Artikel schreiben</li>
  <li data-state="in-progress">Bilder ergänzen</li>
  <li>Veröffentlichen</li>
</ul>

.tasks li[data-state="done"] {
  color: #777;
  text-decoration: line-through;
}
.tasks li[data-state="in-progress"]::after {
  content: " (in Arbeit)";
  color: #e65100;
}
Ergebnis
  • Artikel schreiben
  • Bilder ergänzen (in Arbeit)
  • Veröffentlichen

Links nach ihrer URL – eine andere Website, eine PDF-Datei (auch mit großgeschriebener Endung) und E-Mail:

a[href^="https://"]::after { content: " ↗"; }
a[href$=".pdf" i]::after { content: " (PDF)"; }
a[href^="mailto:"] { font-weight: 700; }

Das Ergebnis: Nach einem Link auf https://… erscheint ein Pfeil, nach einem Link auf preisliste.PDF der Text „(PDF)“ und ein mailto:-Link ist fett.

Formularfelder nach Typ:

<input type="text" placeholder="Name">
<input type="email" placeholder="E-Mail">

input[type="text"],
input[type="email"] {
  padding: 6px 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}
input[type="email"] { border-color: #0088d1; }
Ergebnis

Worauf Sie achten sollten

  • Schreiben Sie den Wert in Anführungszeichen. Ohne sie geht nur ein Wert durch, der ein gültiger Bezeichner ist: [data-state=done] ja, [href$=.pdf] ist ein Fehler und die Regel wird verworfen.
  • Der Wert wird mit Rücksicht auf Groß- und Kleinschreibung verglichen: [href$=".pdf"] wählt PREISLISTE.PDF nicht, das Flag i hilft. Ausnahmen sind manche HTML-Attribute mit fester Werteliste wie type: input[type="EMAIL"] wählt auch type="email".
  • Der Selektor liest das Attribut im HTML, nicht den aktuellen Zustand des Elements: input[value="hello"] ändert sich nicht, wenn der Nutzer etwas anderes ins Feld tippt. Für den Zustand von Feldern gibt es Pseudoklassen (:checked, :placeholder-shown).
  • [class="a"] vergleicht das ganze Attribut, ein Element mit class="a b" wählt es nicht. Für eine der Klassen nehmen Sie .a oder [class~="a"].

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 3. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
Klassenselektor (.klasse)
ID-Selektor (#id)
:lang()
:checked
:placeholder-shown
content