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"] (Anfang)
[attributname$="wort"] (Ende)
[attributname*="wort"] (enthält)

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>
</ul>
a[href^="https://"] { font-weight: bold }
a[href$=".pdf"]     { color: green }
a[href*="wiki"]     { font-style: italic }

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.

Beachten Sie: wort darf weder leer sein, noch Leerzeichen enthalten

Siehe auch

• Selektoren in CSS
  • Einstieg Teilübereinstimmung

Weblinks

• W3C: attribute representation CSS Selektors Level 3