Universelle Selektoren
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Der CSS universelle Selektor (*) wählt Elemente jeden Typs aus.
/* Selects all elements */
* {
color: green;
}
Der universelle Selektor ist ein spezieller Typ-Selektor und kann daher mit @namespace namespaced werden. Dies ist nützlich, wenn Sie mit Dokumenten arbeiten, die mehrere Namensräume wie HTML mit eingebettetem SVG oder MathML oder XML enthalten, das mehrere Vokabulare mischt.
ns|*- wählt alle Elemente im Namensraum ns aus*|*- wählt alle Elemente aus|*- wählt alle Elemente ohne erklärten Namensraum aus
Hinweis:
Der universelle Selektor (*) wählt nur Elemente aus.
Er wählt nicht direkt Pseudo-Elemente aus.
Um beispielsweise alle ::before Pseudo-Elemente auf einer Seite zu wählen, müssten Sie einen Selektor wie *::before verwenden. Dies funktioniert, weil das * alle Elemente auswählt und das ::before Pseudo-Element auf allen Elementen verfügbar ist.
Syntax
* { style properties }
Das Sternchen ist bei einfachen Selektoren optional. Beispielsweise sind *.warning und .warning gleichwertig.
Beispiele
CSS
* [lang^="en"] {
color: green;
}
*.warning {
color: red;
}
*#maincontent {
border: 1px solid blue;
}
.floating {
float: left;
}
/* automatically clear the next sibling after a floating element */
.floating + * {
clear: left;
}
HTML
<p class="warning">
<span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
<span class="warning">A red span</span> in a green paragraph.
</p>
Ergebnis
Namespaces
In diesem Beispiel wählt der Selektor nur Elemente im Beispiel-Namensraum aus.
@namespace example url("http://www.example.com/");
example|* {
color: blue;
}
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # the-universal-selector |