Universal selectors
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The CSS universal selector (*) matches elements of any type.
css
/* Selects all elements */ * { color: green; } The universal selector is a special type selector and can therefore be namespaced when using @namespace. This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.
ns|*- matches all elements in namespace ns*|*- matches all elements|*- matches all elements without any declared namespace
Syntax
css
* { style properties } The asterisk is optional with simple selectors. For instance, *.warning and .warning are equivalent.
Examples
CSS
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
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> Result
Namespaces
In this example the selector will only match elements in the example namespace.
css
@namespace example url(http://www.example.com/); example|* { color: blue; } Specifications
| Specification |
|---|
| Selectors Level 4 # the-universal-selector |
