Attributselektoren

Diese Selektoren ermöglichen die Auswahl eines Elements basierend auf der bloßen Anwesenheit eines Attributs (zum Beispiel href) oder auf verschiedenen Übereinstimmungen gegen den Wert des Attributs.

Im folgenden Beispiel sehen Sie diese Selektoren in Verwendung.

• Durch die Verwendung von li[class] können wir jedes Listenelement mit einem Klassenattribut ansprechen. Dies entspricht allen Listenelementen außer dem ersten.
• li[class="a"] passt auf einen Selektor mit einer Klasse von a, jedoch nicht auf einen Selektor mit einer Klasse von a mit einer weiteren leerzeichenseparierten Klasse als Teil des Wertes. Es wählt das zweite Listenelement aus.
• li[class~="a"] passt auf eine Klasse von a, aber auch auf einen Wert, der die Klasse von a als Teil einer durch Leerzeichen getrennten Liste enthält. Es wählt das zweite und dritte Listenelement aus.

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

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

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

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

Diese Selektoren ermöglichen ein fortgeschritteneres Matching von Teilstrings innerhalb des Attributwerts. Wenn Sie beispielsweise Klassen von box-warning und box-error hätten und alles auswählen wollten, das mit dem String "box-" beginnt, könnten Sie [class^="box-"] verwenden, um beide auszuwählen (oder [class|="box"], wie im obigen Abschnitt beschrieben).

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

Das nächste Beispiel zeigt die Verwendung dieser Selektoren:

• li[class^="a"] passt auf jeden Attributwert, der mit a beginnt, also passt es auf die ersten beiden Listenelemente.
• li[class$="a"] passt auf jeden Attributwert, der mit a endet, also passt es auf das erste und dritte Listenelement.
• li[class*="a"] passt auf jeden Attributwert, in dem a irgendwo im String erscheint, also passt es auf alle unsere Listenelemente.

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

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

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

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

Wenn Sie Attributwerte ohne Berücksichtigung der Groß-/Kleinschreibung abgleichen möchten, können Sie das i-Flag vor der schließenden Klammer verwenden. Dieses Flag teilt dem Browser mit, ASCII-Zeichen unabhängig von der Groß-/Kleinschreibung abzugleichen. Ohne das Flag werden die Werte gemäß der Groß-/Kleinschreibungssensitivität der Dokumentensprache abgeglichen – im Fall von HTML wird es groß-/kleinschreibungssensitiv sein.

Im folgenden Beispiel passt der erste Selektor auf einen Wert, der mit a beginnt – er passt nur auf das erste Listenelement, weil die anderen beiden Listenelemente mit einem Großbuchstaben A beginnen. Der zweite Selektor verwendet das groß-/kleinschreibungsinsensitive Flag und passt daher auf alle Listenelemente.

<h1>Case-insensitivity</h1>
<ul>
  <li class="a">Item 1</li>
  <li class="A">Item 2</li>
  <li class="Ab">Item 3</li>
</ul>

body {
  font-family: sans-serif;
}
li[class^="a"] {
  background-color: yellow;
}

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

Jetzt, da wir mit den Attributselektoren fertig sind, können Sie mit dem nächsten Artikel fortfahren und über Pseudoklassen- und Pseudoelementselektoren lesen.

• Zurück
• Übersicht: CSS-Bausteine
• Weiter