CSS/Selektoren/Attributselektor/Wert
Aus SELFHTML-Wiki
< CSS | Selektoren | Attributselektor
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>
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]
- Attributpräsenz:
[a] - Teilübereinstimmung:
[a^=v],[a$=v],a[*=v]
type-Attribut des „Absenden“-Knopfes besitzt genau den Wert „submit“. Dadurch wird die Schrift des Elements fett formatiert.