Attribute Selector :: [attribute]
Mit Hilfe des Attribut Selector kann man bestimmte Elemente an Hand ihrer Eigenschaften auswählen. So kann man z. B. alle Überschriften 1. Ordnung wählen, welche ein bestimmtes title-Attribut besitzen.
| Attribut | Beschreibung |
|---|---|
| Element[attribut] | wählt ein Element, wenn es ein bestimmtes Attribut enthält, wobei der Wert des Attributes egal ist |
| Element[attribut="value"] | wählt ein Element, wenn es ein bestimmtes Attribut mit einem bestimmten Wert enthält |
| Element[attribut~="value"] | wählt ein Element, wenn es ein bestimmtes Attribut enthält, und der Wert in einer Leerzeichen getrennten Aufzählung enthalten ist |
| Element[attribut|="value"] | wählt ein Element, wenn es ein bestimmtes Attribut mit einem bestimmten Wert oder den Wert gefolgt von einem Bindestrich enthält |
.
<style type="text/css">
h3[title] { color: blue; }
h3[title="Details"] { color: green; }
h3[title~="Detail"] { color: red; }
h3[title|="Angabe"] { color: orange; }
</style>
<h3 title="irgendwas">Dies Überschrift ist blau</h3>
<h3 title="Details">Dies ist grün, und nicht rot</h3>
<h3 title="Detail 1">1. rote Überschrift</h3>
<h3 title="Detail 2">2. rote Überschrift</h3>
<h3 title="Angabe-Details">diese Überschrift ist orange ;)</h3>
so sieht es aus
Dies Überschrift ist blau
Dies ist grün, und nicht rot
1. rote Überschrift
2. rote Überschrift
diese Überschrift ist orange ;)
Browserunterstützung für den attribut-Selektor
 |
 |
 |
 |
 |
 |
 |
 |
||
|---|---|---|---|---|---|---|---|---|---|
| 5+ | 5+ | 4 | 6+ | 1+ | 0.8+ | 1+ | 3.5+ | 2 | |
letzte Änderung: 08.04.2011