CSS/Selektoren/Teilübereinstimmung

Der Teilübereinstimmung-Selektor spricht alle Elemente mit einem bestimmten Attribut an, dessen Attributwert ein bestimmtes Wort enthält.

Syntax

[attributname^="wort"] - Wert beginnt mit wort
[attributname$="wort"] - Wert endet mit wort
[attributname*="wort"] - Wert enthält wort
[attributname~="wort"] - enthält wort als Wort
[attributname|="wort"] - ist gleich wort oder beginnt mit wort-

Beispiel

<ul>
  <li><a href="https://example.com/">Beispiellink</a></li>
  <li><a href="https://example.com/example.pdf">Ein PDF-Dokument</a></li>
  <li><a href="https://wiki.selfhtml.org/">Das selfhtml wiki</a></li>
  <li><a href="http://example.org/WIKI/example.pdf/">kein Selektor darf diesen Link stylen.</a></li>
  <li lang="en-GB">Please move from the pavement onto the elevator!</li>
  <li lang="en-US" class="it's some english">Please leave the sidewalk and enter the lift!</li>
</ul>

a[href^="https://"] { font-weight: bold; }
a[href$=".pdf"]     { color: green; }
a[href*="wiki"]     { font-style: italic; }
li[lang|="en"]      { color: red; }
li[class~="some"]   { background-color: blue; }

1. Der erste Link wird fett formatiert, denn seine hypertext reference beginnt mit https://.
2. Die Linkbeschriftung wird fett und grün formatiert, denn das href-Attribut beginnt mit https:// und endet mit .pdf.
3. Die Linkbeschriftung wird fett und kursiv formatiert, denn das href-Attribut beginnt mit https:// und enthält wiki.
4. Der fünfte Listenpunkt ist als britisches Englisch markiert und wird durch die vierte Regel mit rotem Text angezeigt. Der |= Operator ist genau zu diesem Zweck eingeführt worden.
5. Der sechste Listenpunkt ist als amerikanisches Englisch markiert. Die vierte Regel trifft ebenfalls zu, aber auch der Wortvergleich der fünften Regel und darum gibt es roten Text und blauen Hintergrund (ohne weiße Sterne).

Beachten Sie:

• wort darf nicht leer sein
• wort ist prinzipiell eine Zeichenkette, aber wenn es den Regeln für CSS-Namen folgt, können die Anführungszeichen entfallen
• Für den Wort-Vergleich gilt, dass Worte durch Whitespace getrennt werden.
• Im class-Attribut kann man Worte einfacher über den Klassenselektor abfragen, hier ist aber zu beachten, dass CSS nicht nur für HTML definiert ist, aber der Klassenselektor nur für HTML gilt.

Siehe auch

• Selektoren in CSS
  • Einstieg Teilübereinstimmung

Weblinks

• W3C: attribute representation CSS Selektors Level 3