Attributselektoren

Wie Sie aus Ihrem HTML-Studium wissen, können Elemente Attribute haben, die weitere Details zu dem markierten Element angeben. In CSS können Sie Attributselektoren verwenden, um Elemente mit bestimmten Attributen zu selektieren. Diese Lektion zeigt Ihnen, wie Sie diese sehr nützlichen Selektoren verwenden können.

Voraussetzungen:	Grundlagen von HTML (studieren Sie Grundlegende HTML-Syntax), Grundlegende CSS-Selektoren.
Lernziele:	Das Grundkonzept von Attributselektoren. Vorhandenheits- und Wertattributselektoren. Substring-Matching-Attributselektoren.

Vorhandenheits- und Wertselektoren

Diese Selektoren ermöglichen die Auswahl eines Elements basierend auf dem bloßen Vorhandensein eines Attributs (zum Beispiel href) oder auf verschiedenen Übereinstimmungen mit dem Attributwert.

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

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

Durch die Verwendung von li[class] können wir jedes Listenelement mit einem Klassenattribut auswählen. Dies entspricht allen Listenelementen außer dem ersten.
li[class="a"] wählt einen Selektor mit einer Klasse von a aus, aber nicht einen Selektor mit einer Klasse von a zusammen mit einer anderen leerzeichengetrennten Klasse als Teil des Werts. Es wählt das zweite Listenelement.
li[class~="a"] wird eine Klasse von a übereinstimmen, aber auch einen Wert, der die Klasse von a als Teil einer durch Leerzeichen getrennten Liste enthält. Es wählt die zweiten und dritten Listenelemente aus.

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;
}

Versuchen Sie, das obige CSS zu bearbeiten, um eine Regel hinzuzufügen, die nur Listenelemente mit einem class Attributwert von ab auswählt und diesen eine weiße Textfarbe color und eine purpur background-color gibt.

Substring-Matching-Selektoren

Diese Selektoren ermöglichen ein fortgeschritteneres Matching von Substrings innerhalb des Werts Ihres Attributs. Wenn Sie zum Beispiel Klassen von box-warning und box-error hätten und alles, was mit dem String "box-" beginnt, übereinstimmen möchten, könnten Sie [class^="box-"] verwenden, um sie beide auszuwählen (oder [class|="box"] wie im obigen Abschnitt beschrieben).

Selektor	Beispiel	Beschreibung
`[attr^=value]`	`li[class^="box-"]`	Wählt Elemente mit einem attr Attribut aus, dessen Wert mit value beginnt.
`[attr$=value]`	`li[class$="-box"]`	Wählt Elemente mit einem attr Attribut aus, dessen Wert mit value endet.
`[attr*=value]`	`li[class*="box"]`	Wählt Elemente mit einem attr Attribut aus, dessen Wert value an irgendeiner Stelle innerhalb der Zeichenkette enthält.

Das nächste Beispiel zeigt die Verwendung dieser Selektoren:

li[class^="a"] wählt jeden Attributwert aus, der mit a beginnt, und entspricht daher den ersten beiden Listenelementen.
li[class$="a"] wählt jeden Attributwert aus, der mit a endet, und entspricht daher dem ersten und dritten Listenelement.
li[class*="a"] wählt jeden Attributwert aus, bei dem a irgendwo im String vorkommt, also entspricht es all unseren Listenelementen.

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;
}

Versuchen Sie, das obige CSS zu bearbeiten, um eine Regel hinzuzufügen, die nur Listenelemente mit einem class Attributwert auswählt, der b oder c am Ende hat, und diese mit einem 2px breiten, soliden, schwarzen Rand versieht. Möglicherweise müssen Sie eine Selektorenliste verwenden, um dies zu lösen.

Zusammenfassung

Jetzt, da wir mit Attributselektoren fertig sind, können Sie zum nächsten Artikel übergehen und über Pseudo-Klassen- und Pseudo-Elementselektoren lesen.