Universal selectors

The CSS universal selector (*) matches elements of any type.

/* Selects all elements */
* {
  color: green;
}

Universal selectors can be namespaced when using @namespace. This is useful when dealing with documents containing multiple namespaces such as HTML5 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

* { style properties }

The asterisk is optional with simple selectors. For instance, *.warning and .warning are equivalent.

Examples

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>

Result

Namespaces

In this example the selector will only match elements in the example namespace.

@namespace example url(http://www.example.com);
example|* { color: blue }

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Universal_selectors
1
12
1
7
3.5
1
≤37
18
4
10.1
1
1.0
namespaces
1
12
1
9
8
1.3
≤37
18
4
10.1
1
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors