CSS/Selektoren/Attributselektor/Präsenz

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Ein Element, das ein bestimmtes Attribut besitzt, kann durch den einfachen Attributselektor angesprochen werden. Ein Attributselektor wird gebildet, indem eckige Klammern („[“ und „]“) um den Namen des Attributs gesetzt werden.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Attributselektor</title> <style> [title] {border: 3px solid green;} </style> </head> <body> <h1>Wirkung des einfachen Attributselektors</h1> <ul title="Linkliste"> <li><a href="http://www.example.org/">Beispielverweis</a></li> <li><a href="http://www.example.net/">Beispielverweis</a></li> <li><a title="Beispiel">Beispielverweis</a></li> </ul> </body> </html>
In diesem Beispiel erhalten nur das letzte Element der Liste und die Liste selbst einen grünen Rahmen, da beide über ein title-Attribut verfügen. Der Attributwert spielt für den einfachen Attributselektor keine Rolle.

Attributselektoren können mit anderen Selektoren verbunden werden:

  • Mit dem Universalselektor: *[attributname] - diese Schreibweise ist zu der Schreibweise ohne Universalselektor identisch.
  • Mit dem Elementselektor: elementname[attributname]
  • Mit Klassenselektoren: .klassenname[attributname]
  • Mit dem ID-Selektor: #id[attributname]

siehe auch[Bearbeiten]