[attribut]

Es gibt viele Möglichkeiten, Elemente in CSS auszuwählen. Die grundlegendste Auswahl erfolgt nach Tag-Namen, wie p { }. Fast alles Spezifischere als ein Tag-Selektor verwendet Attribute – Klasse und ID wählen beide auf diesen Attributen von HTML-Elementen aus. Aber Klasse und ID sind nicht die einzigen Attribute, nach denen Entwickler auswählen können. Wir können *jedes* Attribut eines Elements als Selektor verwenden.

Attributauswahl hat eine spezielle Syntax. Hier ist ein Beispiel

a[href="https://css-tricks.de"] {
  color: #E18728;
}

Das ist ein Exakter Treffer-Selektor, der nur Links mit dem exakten href-Attributwert „https://css-tricks.de“ auswählt.

Die sieben verschiedenen Typen

Attributselektoren sind standardmäßig Groß-/Kleinschreibung-sensitiv (siehe Groß-/Kleinschreibung-unabhängige Übereinstimmung unten) und werden in Klammern [] geschrieben.

Es gibt sieben verschiedene Arten von Übereinstimmungen, die Sie mit einem Attributselektor finden können, und die Syntax ist für jede unterschiedlich. Jeder der komplexeren Attributselektoren baut auf der Syntax des Selektors für exakte Übereinstimmung auf – sie alle beginnen mit dem Attributnamen und enden mit einem Gleichheitszeichen gefolgt von den Attributwert(en), normalerweise in Anführungszeichen. Was zwischen dem Attributnamen und dem Gleichheitszeichen steht, macht den Unterschied zwischen den Selektoren aus.

[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

Wert enthält: Der Attributwert enthält einen Begriff als einzigen Wert, als Wert in einer Liste von Werten oder als Teil eines anderen Werts. Um diesen Selektor zu verwenden, fügen Sie einen Stern (*) vor dem Gleichheitszeichen ein. Zum Beispiel wählt img[alt*="kunst"] Bilder mit dem alternativen Text „abstrakte Kunst“ und „Athlet beginnt einen neuen Sport“ aus, da der Wert „Kunst“ im Wort „beginnt“ enthalten ist.

Wert ist in einer durch Leerzeichen getrennten Liste: Der Wert ist entweder der einzige Attributwert oder ein vollständiger Wert in einer durch Leerzeichen getrennten Menge von Werten. Im Gegensatz zum „enthält“-Selektor sucht dieser Selektor nicht nach dem Wert als Wortfragment. Um diesen Selektor zu verwenden, fügen Sie eine Tilde (~) vor das Gleichheitszeichen ein. Zum Beispiel wählt img[alt~="kunst"] Bilder mit dem alternativen Text „abstrakte Kunst“ und „Kunstausstellung“ aus, aber nicht das Bild „Athlet beginnt einen neuen Sport“ (das der „enthält“-Selektor auswählen *würde*).

Wert beginnt mit: Der Attributwert beginnt mit dem ausgewählten Begriff. Um diesen Selektor zu verwenden, fügen Sie ein Caret-Zeichen (^) vor das Gleichheitszeichen ein. Vergessen Sie nicht, dass die Groß-/Kleinschreibung wichtig ist. Zum Beispiel wählt img[alt^=”kunst”] Bilder mit dem alternativen Text „Kunstausstellung“ und „künstlerisches Muster“ aus, aber kein Bild mit dem alternativen Text „Arthur Miller“, da „Arthur“ mit einem Großbuchstaben beginnt.

Wert ist der erste in einer durch Bindestriche getrennten Liste: Dieser Selektor ist dem „beginnt mit“-Selektor sehr ähnlich. Hier passt der Selektor auf einen Wert, der entweder der einzige Wert ist oder der *erste* in einer durch Bindestriche getrennten Liste von Werten ist. Um diesen Selektor zu verwenden, fügen Sie ein Pipe-Zeichen (|) vor das Gleichheitszeichen ein. Zum Beispiel wählt li[data-jahre|="1900"] Listenelemente mit einem data-jahre-Wert von „1900-2000“ aus, aber nicht das Listenelement mit einem data-jahre-Wert von „1800-1900“.

Wert endet mit: Der Attributwert endet mit dem ausgewählten Begriff. Um diesen Selektor zu verwenden, fügen Sie ein Dollarzeichen ($) vor das Gleichheitszeichen ein. Zum Beispiel wählt a[href$="pdf"] jeden Link aus, der mit .pdf endet.

Siehe den Pen Attributselektoren von CSS-Tricks (@css-tricks) auf CodePen.

Spaßfakt: Die Werte werden als Zeichenketten behandelt, sodass Sie keine ausgefallenen Maskierungen von Zeichen vornehmen müssen, um sie abzugleichen, wie Sie es bei ungewöhnlichen Zeichen in einem Klassen- oder ID-Selektor tun würden.

[class="(╯°□°）╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;
}

Groß-/Kleinschreibung-unabhängige Übereinstimmung

Attributselektoren, die Groß-/Kleinschreibung nicht beachten, sind Teil der Selectors Level 4-Spezifikation der CSS Working Group. Wie oben erwähnt, sind Zeichenketten von Attributwerten standardmäßig Groß-/Kleinschreibung-sensitiv, können aber durch Hinzufügen von i direkt vor der schließenden Klammer Groß-/Kleinschreibung-unabhängig gemacht werden.

[attribute="value" i] {
  /* Styles here will apply to elements with:
    attribute="value"
    attribute="VaLuE"
    attribute="VALUE"
    ...etc
  */
}

Groß-/Kleinschreibung-unabhängige Übereinstimmungen können sehr nützlich sein, um Attribute zu adressieren, die unvorhersehbare, von Menschen geschriebene Texte enthalten. Angenommen, Sie würden zum Beispiel eine Sprechblase in einer Chat-App gestalten und zu jeder Nachricht, die den Text „Hallo“ in irgendeiner Form enthält, eine „winkende Hand“ hinzufügen wollen. Sie könnten dies nur mit CSS tun, indem Sie einen Groß-/Kleinschreibung-unabhängigen Abgleich verwenden, um alle möglichen Variationen zu erfassen.

Siehe den Pen Groß-/Kleinschreibung-unabhängige CSS-Attributübereinstimmung von CSS-Tricks (@css-tricks) auf CodePen.

Kombinieren

Sie können einen Attributselektor mit anderen Selektoren kombinieren, z. B. Tag, Klasse oder ID.

div[attribute="value"] {
  /* style rules here */
}

.module[attribute="value"] {
  /* style rules here */
}

#header[attribute="value"] {
  /* style rules here */
}

Oder sogar mehrere Attributselektoren kombinieren. Dieses Beispiel wählt Bilder mit alternativer Textur aus, die das Wort „Person“ als einzigen Wert oder als Wert in einer durch Leerzeichen getrennten Liste enthalten, und einen src-Wert, der den Wert „lorem“ enthält.

img[alt~="person"][src*="lorem"] {
  /* style rules here */
}

Siehe den Pen Kombinierte Attribute und nur Attributauswahl von CSS-Tricks (@css-tricks) auf CodePen.

Attributselektoren in JavaScript und jQuery

Attributselektoren können in jQuery genauso verwendet werden wie jeder andere CSS-Selektor. In JavaScript können Sie Attributselektoren mit document.querySelector() und document.querySelectorAll() verwenden.

Siehe den Pen Attributselektoren in JS und jQuery von CSS-Tricks (@css-tricks) auf CodePen.

Verwandt

• Klasse
• ID

Weitere Informationen

• Das Wichtigste über Attributselektoren
• Attributselektoren bei MDN
• Attributselektoren in der W3C CSS-Spezifikation

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Alle	Alle	Alle	Alle	7+	Alle	Alle