CSS/Selektoren/Attributselektor/Wert

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

Attributselektoren erlauben es, Elemente nur dann anzusprechen, wenn das Attribut einen bestimmten Wert oder einen bestimmten Wertabschnitt besitzt. Sie können Elemente ansprechen,

  • deren Attribut einen genau festgelegten Wert besitzt. Dazu wird innerhalb der eckigen Klammern des Selektors ein Gleichheitszeichen gefolgt von dem abzufragenden Wert notiert ([attributname=attributwert]).
  • deren Attribut eine Zeichenkette enthält, die durch Leerzeichen von anderen Bestandteilen des Attributwerts getrennt ist. Dazu notieren Sie den Attributselektor wie zuvor beschrieben und zusätzlich eine Tilde („~“) vor dem Gleichheitszeichen ([attributname~=attributwert]). Enthält der im Selektor angegebene Wert ein Leerzeichen, so spricht dieser Selektor kein Element an.
  • deren Attribut mit einer Zeichenkette beginnt, die durch den Bindestrich vom Rest des Attributwerts getrennt ist. Dazu notieren Sie den Attributselektor wie zuvor beschrieben, jedoch mit dem Verkettungszeichen („|“) vor dem Gleichheitszeichen ([attributname|=attributwert]).
Beachten Sie: Beginnt der im Selektor angegebene Wert mit einer Ziffer oder besteht aus anderen Zeichen als Buchstaben, Ziffern, Binde- und Unterstrich, so muss er innerhalb von einfachen oder doppelten Anführungszeichen notiert werden.
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Attributselektor</title> <style> [type=submit] {font-weight: bold;} [title~=Berlin] {color: green;} [hreflang|=de] {font-style: italic;} </style> </head> <body> <!-- 1. --> <h1>Der [attribut=wert]-Selektor</h1> <p><input type="text" value="Beispiel"> <input type="submit" value="Absenden"></p> <!-- 2. --> <h1>Der [attribut~=wert]-Selektor</h1> <ul> <li title="Berlin: eine schöne Stadt">Viele Informationen.</li> <li title="Die Stadt Berlin besteht aus mehreren Stadteilen">Mehr Informationen.</li> <li title="Das Brandenburger Tor steht in Berlin">Noch mehr Informationen.</li> </ul> <!-- 3. --> <h1>Der [attribut|=wert]-Selektor</h1> <ul> <li><a href="http://www.example.org/" hreflang="de">Beispielverweis</a></li> <li><a href="http://www.example.com/" hreflang="de-at">Beispielverweis</a></li> <li><a href="http://www.example.net/" hreflang="en-de">Beispielverweis</a></li> </ul> </body> </html>
  1. Nur das type-Attribut des „Absenden“-Knopfes besitzt genau den Wert „submit“. Dadurch wird die Schrift des Elements fett formatiert.
  2. Der zweite und der dritte Listenpunkt werden mit einer grünen Schriftfarbe dargestellt. Der erste Listenpunkt wird nicht formatiert, da das Wort „Berlin“ nicht durch ein Leerzeichen vom restlichen Attributwert getrennt wird.
  3. Die Schrift des ersten und des zweiten Verweises werden kursiv formatiert. Der Selektor funktioniert nur, wenn der festgelegte Wert am Anfang des Attributwertes vorkommt.
Beachten Sie: In HTML gibt es Attribute, denen kein Wert zugewiesen werden muss, z.B. das checked-Attribut bei input-Elementen. Wird so einem Attribut kein Wert zugewiesen, erhält die DOM-Abbildung dieses Attributs automatisch eine leere Zeichenkette als Wert zugewiesen. Die Selektoren [checked=""], [checked~=""] und [checked|=""] würden daher das Element ansprechen.

siehe auch[Bearbeiten]