CSS Namespace Universal Selector

CSS Namespace Universal Selector

The CSS namespace universal selector combines namespace syntax with the universal selector (*) to match elements according to their namespace without restricting the match to a particular element name. It can select all elements in a specified namespace, all elements regardless of namespace, or elements that belong to no namespace.

Syntax

To match every element within a namespace associated with a prefix, place the namespace prefix before a vertical bar (|) followed by the universal selector:

namespace|* {
  property: value;
}

For example, if svg represents the SVG namespace, the following selector matches every element in that namespace:

svg|* {
  fill: #0088cc;
}

How the Namespace Universal Selector Works

The universal selector normally represents any element. When it is qualified by a namespace prefix, its matching is restricted according to that namespace.

svg|* {
  fill: #0088cc;
}

This selector can match SVG elements such as <circle>, <rect>, and <path> because each belongs to the namespace associated with the svg prefix.

Declaring Namespaces

A namespace prefix must be declared before it can be used in a namespace-qualified selector. The CSS @namespace rule associates a prefix with a namespace name:

@namespace svg url(http://www.w3.org/2000/svg);

The declared prefix can then qualify the universal selector:

svg|* {
  fill: #0088cc;
}

The namespace prefix used in the stylesheet is defined by the @namespace rule and does not need to match a prefix used in the document markup.

Namespace Universal Selector Variations

The namespace syntax can be combined with the universal selector in several ways:

The namespace prefix can also be combined with a specific element name instead of the universal selector. These forms are covered in the CSS Namespace Selector reference.

Combining with Other Selectors

A namespace universal selector can be combined with classes, IDs, attributes, pseudo-classes, and other selector components to further restrict which elements match.

svg|*.highlight {
  fill: #0088cc;
}
svg|*[data-active] {
  stroke-width: 2;
}
svg|*:hover {
  opacity: 0.7;
}

In each example, the element must first belong to the namespace represented by svg and must also satisfy the additional selector.

Specificity

The universal selector, namespace prefix, and vertical bar do not add specificity. Only other selector components in the complete selector contribute to its specificity.

Namespace Universal Selector Example

The following example declares the SVG namespace and uses svg|* to apply a stroke to every SVG element in the example:

@namespace svg url(http://www.w3.org/2000/svg);
svg|* {
  stroke: #0088cc;
  stroke-width: 3;
}

Play in Editor

Related Selectors

Namespace universal selectors are closely related to namespace-qualified type selectors and the ordinary universal selector:

• Namespace Selector
• Universal Selector
• Type Selector
• Attribute Selector

Specifications

Namespace-qualified universal selectors are defined in the Selectors Level 4 specification. Namespace declarations for CSS are defined by CSS Namespaces Module Level 3 .