CSS/Selektoren/Teilübereinstimmung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

Syntax [attributname^="word"] (Anfang)

[attributname$="wort"] (Ende)
[attributname*="wort"] (enthält)

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

Weblinks