Attribut-Selektoren

Wie Sie aus Ihrem Studium von HTML wissen, können Elemente Attribute besitzen, die weitere Details über das markierte Element liefern. In CSS können Sie Attribut-Selektoren verwenden, um Elemente mit bestimmten Attributen zu selektieren. Diese Lektion zeigt Ihnen, wie Sie diese sehr nützlichen Selektoren verwenden.

Voraussetzungen:	Grundlagen von HTML (siehe Grundlegende HTML-Syntax), Grundlegende CSS-Selektoren .
Lernziele:	Das grundlegende Konzept der Attribut-Selektoren. Präsenz- und Wert-Prüfungs-Selektoren. Teilstring-Vergleichs-Selektoren.

Präsenz- und Wert-Prüfungs-Selektoren

Diese Selektoren ermöglichen die Auswahl eines Elements basierend einzig auf dem Vorhandensein eines Attributs (zum Beispiel href) oder auf verschiedenen Übereinstimmungen mit dem Wert des Attributs.

Selektor	Beispiel	Beschreibung
`[attr]`	`a[title]`	Selektiert Elemente mit einem attr-Attribut (dessen Name der Wert in den eckigen Klammern ist).
`[attr=value]`	`a[href="https://example.com"]`	Selektiert Elemente mit einem attr-Attribut, dessen Wert genau value ist — der String innerhalb der Anführungszeichen.
`[attr~=value]`	`p[class~="special"]`	Selektiert Elemente mit einem attr-Attribut, dessen Wert genau value ist oder value in seiner (leerzeichen-getrennten) Werteliste enthält.
`[attr\|=value]`	`div[lang\|="zh"]`	Selektiert Elemente mit einem attr-Attribut, dessen Wert genau value ist oder mit value direkt gefolgt von einem Bindestrich beginnt.

Im folgenden Beispiel können Sie sehen, wie diese Selektoren verwendet werden.

Durch die Verwendung von li[class] können wir jedes Listen-Element mit einem class-Attribut selektieren. Dies umfasst alle Listenelemente außer dem ersten.
li[class="a"] selektiert ein Element mit einer Klasse von a, aber nicht eines mit der Klasse a in Kombination mit einer anderen leerzeichen-getrennten Klasse. Es selektiert das zweite Listenelement.
li[class~="a"] wird eine Klasse von a selektieren, aber auch einen Wert, der die Klasse von a als Teil einer leerzeichen-getrennten Liste enthält. Es selektiert das zweite und dritte Listenelement.

html

<h1>Attribute presence and value selectors</h1>
<ul>
  <li>Item 1</li>
  <li class="a">Item 2</li>
  <li class="a b">Item 3</li>
  <li class="ab">Item 4</li>
</ul>

css

body {
  font-family: sans-serif;
}
li[class] {
  font-size: 120%;
}

li[class="a"] {
  background-color: yellow;
}

li[class~="a"] {
  color: red;
}

Teilstring-Vergleichs-Selektoren

Diese Selektoren ermöglichen fortgeschrittenere Übereinstimmungen von Teilstrings innerhalb des Werts Ihres Attributs. Wenn Sie beispielsweise Klassen von box-warning und box-error hatten und alles selektieren möchten, das mit dem String "box-" beginnt, könnten Sie [class^="box-"] verwenden, um beide auszuwählen (oder [class|="box"] wie im obigen Abschnitt beschrieben).

Selektor	Beispiel	Beschreibung
`[attr^=value]`	`li[class^="box-"]`	Selektiert Elemente mit einem attr-Attribut, dessen Wert mit value beginnt.
`[attr$=value]`	`li[class$="-box"]`	Selektiert Elemente mit einem attr-Attribut, dessen Wert mit value endet.
`[attr*=value]`	`li[class*="box"]`	Selektiert Elemente mit einem attr-Attribut, dessen Wert value irgendwo innerhalb des Strings enthält.

(Nebenbei bemerkt: Es kann hilfreich sein, zu wissen, dass ^ und $ schon lange als Anker in sogenannten regulären Ausdrücken verwendet werden, um beginnt mit und endet mit zu bedeuten.)

Das nächste Beispiel zeigt die Verwendung dieser Selektoren:

li[class^="a"] selektiert jeden Attributwert, der mit a beginnt, daher werden die ersten beiden Listenelemente ausgewählt.
li[class$="a"] selektiert jeden Attributwert, der mit a endet, daher wird das erste und dritte Listenelement ausgewählt.
li[class*="a"] selektiert jeden Attributwert, bei dem a irgendwo im String vorkommt, daher werden alle unsere Listenelemente ausgewählt.

html

<h1>Attribute substring matching selectors</h1>
<ul>
  <li class="a">Item 1</li>
  <li class="ab">Item 2</li>
  <li class="bca">Item 3</li>
  <li class="bcabc">Item 4</li>
</ul>

css

body {
  font-family: sans-serif;
}
li[class^="a"] {
  font-size: 120%;
}

li[class$="a"] {
  background-color: yellow;
}

li[class*="a"] {
  color: red;
}

Zusammenfassung

Nun, da wir die Attribut-Selektoren abgeschlossen haben, können Sie mit dem nächsten Artikel fortfahren und über Pseudo-Klassen und Pseudo-Element Selektoren lesen.