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)
Parameter	{{{Parameter}}}}}
Browsersupport	Details: caniuse.com

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

• CSS/Tutorials/Selektoren/einfacher Selektor#Teilübereinstimmung

Weblinks

• W3C: attribute representation CSS Selektors Level 3