CSS/Selektoren/Attributselektor/Teilübereinstimmung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit CSS3 wurde das Konzept der Attributselektoren erweitet.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

So können Sie Elemente ansprechen,

  • deren Attribut mit einer bestimmten Zeichenkette beginnt. Dazu wird innerhalb der eckigen Klammern des Selektors ein Zirkumflex gefolgt von einem Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname^=zeichenkette]).
  • deren Attribut mit einer bestimmten Zeichenkette endet. Dazu wird innerhalb der eckigen Klammern des Selektors ein Dollarzeichen gefolgt von einem Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname$=zeichenkette]).
  • deren Attribut eine bestimmte Zeichenkette enthält. Dazu wird innerhalb der eckigen Klammern des Selektors ein Asterisk gefolgt von einem Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname*=zeichenkette]).
Beispiel: Teilübereinstimmungen ansehen …
<ul> <li><a href="http://example.com/">Beispiellink</a></li> <li><a href="http://example.com/example.pdf">Ein PDF-Dokument</a></li> <li><a href="http://wiki.selfhtml.org/">Das selfhtml wiki</a></li> <li><a href="https://example.org/WIKI/example.pdf/">kein Selektor darf diesen Link stylen.</a></li> </ul>
a[href^="http://"] { 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 http://.
  2. Die Linkbeschriftung wird fett und grün formatiert, denn das href-Attribut beginnt mit http:// und endet mit .pdf.
  3. Die Linkbeschriftung wird fett und kursiv formatiert, denn das href-Attribut beginnt mit http:// und enthält wiki.
Beachten Sie: Geben Sie als Wert innerhalb dieser Selektoren die leere Zeichenkette an (z.B. [attribut*=""]), spricht der Selektor kein Element an.

Siehe auch[Bearbeiten]