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] | Attributselektor (Attributwert) mit Tilde (~) | jedes Element, bei dem im Attribut attr der Wert wert als allein stehendes Wort vorkommt | <elem attr=„abc wert xyz“> |
| [attr|=wert] | Attributselektor (Attributwert) mit Verkettungszeichen | jedes Element, bei dem im Attribut attr der Wert valx am Anfang als eine durch Bindestrich getrennte Zeichenfolge steht | <elem attr=„valx-valy“> |
Beispiel 1
/* Styling für alle HTML-Elemente wo title den Attributwert deprecated besitzt */ [title=deprecated] { color: red; text-decoration: line-through; }
Beispiel 2
/* Styling von HTML-Elemente wo title im Attributwert das Wort "bzzlab" enthält */ [title~=bzzlab] { font-weight: bold; color: red; }
Beispiel 3
/* Styling von HTML-Elemente wo hreflang mit dem Attributwert de, gefolgt von einem Bindestrich, beginnt */ [hreflang|=de] { font-weight: bold; color: red; }
Attributselektor mit einem bestimmten Teilwert
In CSS3 wurden Attributselektoren erweitert, um auch Teilwerte auszuwählen. Dazu gibt es drei Attributselektoren tabellarisch dargestellt:
| Selektor | Bezecihnung | Auswahl | HTML-Beispiel |
| [attr^=wert] | Attributselektor (Teilwert) | jedes Element, bei dem das Attribut attr mit der Textfolge wert anfängt | <elem attr=„werter“> |
| [attr$=wert] | Attributselektor (Teilwert) | jedes Element, bei dem das Attribut attr mit der Textfolge wert endet | <elem attr=„endwert“> |
| [attr*=wert] | Attributselektor (Teilwert) | jedes Element, bei dem das Attribut attr mit der Textfolge wert enthält | <elem attr=„bewertung“> |
Beispiel 1
/* Styling alle a-Elemente wo das Attribut href mit http:// beginnt */ a[href^="http://"] { text-decoration: none; border-bottom: 2px dotted red; color: red; }
Beispiel 2
/* Styling für a-Elemente wo das Attribut href mit .pdf endet */ a[href$=".pdf"] { text-decoration: none; color: red; padding: 1px; border: 2px dotted red; }
Beispiel 3
/* Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist */ a[href*=mydomain] { font-weight: bold; color: red; }
—
/* Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist */ a[href*=mydomain] {
font-weight: bold; color: red;
}
/* Styling für a-Elemente wo im Attribut href die Textfolge mydomain enthalten ist */
a[href*=mydomain] {
font-weight: bold;
color: red;
}