Dies ist eine alte Version des Dokuments!
LU02c - Spezielle Selektoren
Universalselektor
Mit dem Universalselektor werden alle HTML-Elemente auf einmal in einem Dokument markiert. Der Universalselektor wird mit dem Sternchen * notiert.
Beispiel 1
Der folgende Universal-Selektor setzt überall einen gepunkteten grünen Rahmen.
/* Grüner, gepunkteter Rahmen für alle Elemente */ * { margin: 5px; padding: 3px; border: 2px dotted green; text-align: center; }
Attributselektor
HTML-Elemente können über ihre Attributnamen selektiert werden. In CSS muss der Attributnamen zwischen eckigen Klammern [ ] gesetzt werden.
Beispiel 1
Dieser Attributselektor wird in einem HTML-Dokument um jedes HTML-Element, das ein title-Attribut besitzt, einen Rahmen zeichnen.
/* Styling für alle Elemente mit dem Attribut title */ [title] { border: 4px solid black; }
Beispiel 2
Dieser Attributselektor kann auch auf bestimmte HTML-Elemente angewendet werden. Im Beispiel unten selektiert der Attributselektor alle title-Attribute des <a>-Elements.
/* Styling for alle a-Element mit dem Attribut title */ a[title] { text-decoration: none; color: red; font-weight: bold; border: 2px dotted red; }
Attributselektor mit einem bestimmten Attributwert
Mit dem Attributselektor können Attribute mit einem bestimmten Wert selektiert werden. Es gibt drei Möglichkeiten einen bestimmten Attributwert auszuwählen:
Selektor | Bezecihnung | Auswahl | HTML-Beispiel |
[attr=wert] | Attributselektor (Attributwert) | jedes Element, bei dem das Attribut attr den Wert wert enthält | <elem attr=„wert“> |
[attr~=wert] | Klassenselektor | Element mit der Klasse klname | <p class=„klname“> |
#elemid | ID-Selektor | Element mit der ID elemid | <p id=„elemid“> |