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“> |