CSS-Attributselektoren

Attributselektoren ermöglichen es, HTML-Elemente basierend auf ihren Attributen auszuwählen. Dies bietet eine präzisere und flexiblere Stilverwaltung, besonders bei Formularen und Links.

Typen von Attributselektoren

Attributselektoren können in verschiedenen Formen verwendet werden: Existenzprüfung, exakte Übereinstimmung oder teilweise Übereinstimmungen (Beginn, Ende, enthält).

Selektor	Beschreibung
[attr]	Wählt alle Elemente aus, die das angegebene Attribut besitzen.
[attr="value"]	Wählt Elemente aus, deren Attribut exakt mit dem angegebenen Wert übereinstimmt.
[attr^="value"]	Wählt Elemente aus, deren Attribut mit dem angegebenen Wert beginnt.
[attr$="value"]	Wählt Elemente aus, deren Attribut mit dem angegebenen Wert endet.
[attr*="value"]	Wählt Elemente aus, deren Attribut den angegebenen Teilstring enthält.

Einfache Attributselektoren

Die einfachsten Attributselektoren prüfen auf die Existenz oder exakte Übereinstimmung. Damit werden oft Links oder Formularelemente gezielt.

Im folgenden Beispiel werden Links und Textfelder basierend auf Attributen ausgewählt:

Musterbasierte Selektoren

Fortgeschrittene Attributselektoren ermöglichen Teilübereinstimmungen. So können wir z. B. festlegen, dass ein Link mit https beginnt, auf .pdf endet oder ein bestimmtes Wort enthält.

Tipps zu Attributselektoren

Attributselektoren sind leistungsfähig, aber ihr übermäßiger Einsatz kann die Performance beeinträchtigen. Hier ein paar Ratschläge:

Verwende Teilübereinstimmungen nur, wenn es wirklich nötig ist.
Bei Formularen ist die Auswahl nach Typ sehr nützlich, um verschiedene Eingaben zu unterscheiden.
Vermeide zu allgemeine Muster, damit nicht zu viele Elemente gleichzeitig ausgewählt werden.