CSS/Selektoren/Attributselektor/Teilübereinstimmung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 3.0
  • IE 8
  • Firefox
  • Safari

Mit CSS3 wurde das Konzept der Attributselektoren erweitet. 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 ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Attributselektor</title> <style> a[href^="http://"] { font-weight: bold } a[href$=".pdf"] { color: green } a[href*="wiki"] { font-style: italic } </style> </head> <body> <h1>Teilübereinstimmungen</h1> <ul> <!-- 1. --> <li><a href="http://example.com/">Beispiellink</a></li> <!-- 2. --> <li><a href="http://example.com/example.pdf">Ein PDF-Dokument</a></li> <!-- 3. --> <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> </body> </html>
  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]