Referenz:CSS/Selektoren/Teilübereinstimmung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Selektor Attributwert CSS 2.0
Beschreibung spricht alle Elemente mit einem bestimmten Attribut an, dessen Attributwert ein bestimmtes Wort enthält
Syntax [attributname~=wort]
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Selektors Level 3
Beispiel
[title~=Berlin] { background-color: gold }

Alle Elemente, deren title-Attribut das Wort "Berlin" enthält, erhalten einen goldfarbenen Hintergrund ("Berliner Fernsehturm" enthält nicht das Wort "Berlin").

Beachten Sie wort darf weder leer sein, noch Leerzeichen enthalten
Tipp
Selektor Attributwert CSS 2.0
Beschreibung spricht alle Elemente mit einem bestimmten Attribut an, dessen Attributwert entweder "teil" ist oder mit "teil-" beginnt
Syntax [attributname|=teil]
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Selektors Level 3
Beispiel
[hreflang|=de] { text-decoration: underline }

Alle Elemente, deren hreflang-Attribut "de" ist oder mit "de-" beginnt, werden unterstrichen dargestellt.

Beachten Sie
Tipp Dieser Selektor ist primär für das Selektieren von Sprachkürzeln nach RFC 1766 gedacht.
Selektor Teilübereinstimmung CSS 3.0
Beschreibung spricht alle Elemente mit einem bestimmten Attribut an, dessen Attributwert mit "anfang" beginnt
Syntax [attributname^=anfang]
Browsersupport
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Selektors Level 3
Beispiel
[href^=https] { background-color: #ccc }

Alle Elemente, deren href-Attribut mit "https" beginnt, erhalten einen grauen Hintergrund.

Beachten Sie
Tipp
Selektor Teilübereinstimmung CSS 3.0
Beschreibung spricht alle Elemente mit einem bestimmten Attribut an, dessen Attributwert mit "ende" endet
Syntax [attributname$=ende]
Browsersupport
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Selektors Level 3
Beispiel
[href$=pdf] { border: thin solid #ccc }

Alle Elemente, deren href-Attribut mit "pdf" endet, erhalten einen grauen Rahmen.

Beachten Sie
Tipp
Selektor Teilübereinstimmung CSS 3.0
Beschreibung spricht alle Elemente mit einem bestimmten Attribut an, dessen Attributwert "teil" enthält
Syntax [attributname*=teil]
Browsersupport
  • Chrome
  • Leer
  • IE 8
  • Opera
  • Leer
Spezifikation W3c logo klein.gif CSS Selektors Level 3
Beispiel
[href*=obsolet] { 
  text-decoration: line-through 
}

Alle Elemente, deren href-Attribut "obsolet" enthält, werden durchgestrichen dargestellt.

Beachten Sie
Tipp