CSS Namespace Selector

The CSS namespace selector selects elements according to the namespace they belong to. A namespace prefix is separated from an element name by a vertical bar (|) and is commonly used when a document contains elements from multiple namespaces, such as HTML and SVG.

Syntax

A namespace prefix and element name are separated by a vertical bar (|):

namespace|element {
  property: value;
}

For example, if the prefix svg represents the SVG namespace, the following selector matches <circle> elements in that namespace:

svg|circle {
  fill: #0088cc;
}

How the Namespace Selector Works

Namespaces distinguish elements that may use the same local name but belong to different markup languages. A namespace selector restricts matching to an element name within the specified namespace.

The namespace prefix used in a selector must be associated with a namespace before it can be used. CSS provides the @namespace rule for declaring these namespace prefixes.

Declaring Namespaces

The @namespace rule associates a namespace prefix with a namespace name. For SVG, a namespace declaration can be written as:

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

The declared svg prefix can then be used in namespace-qualified selectors:

svg|circle {
  fill: #0088cc;
}

The prefix used in CSS is defined by the stylesheet's @namespace rule. It does not have to match a prefix that may appear in the document markup.

Namespace Selector Variations

CSS provides several ways to specify the namespace associated with an element selector:

Syntax	Description
`ns\|element`	Matches the element only in the namespace assigned to `ns`.
`*\|element`	Matches the element in any namespace, including elements without a namespace.
`\|element`	Matches the element only when it belongs to no namespace.
`element`	Matches according to the default namespace rules that apply to type selectors.

The universal namespace forms can also be combined with the universal selector. These forms are covered separately in the CSS Namespace Universal Selector reference.

Combining with Other Selectors

A namespace-qualified type selector can be combined with classes, IDs, attributes, pseudo-classes, and other selector components.

svg|circle.highlight {
  fill: #0088cc;
}
svg|a[href] {
  font-weight: 600;
}
svg|circle:hover {
  fill: #d8f1fc;
}

Only elements in the specified namespace can match the namespace-qualified portion of these selectors.

Specificity

The namespace prefix and vertical bar do not add specificity. A namespace-qualified type selector has the same specificity as an ordinary type selector. Other selector components continue to contribute their normal specificity.

Selector	Specificity
`svg\|circle`	`0-0-1`
`svg\|circle.highlight`	`0-1-1`
`svg\|circle[title]`	`0-1-1`
`svg\|circle#marker`	`1-0-1`

Namespace Selector Example

The following example declares the SVG namespace and uses svg|circle to select SVG <circle> elements:

@namespace svg url(http://www.w3.org/2000/svg);
svg|circle {
  fill: #0088cc;
}

Play in Editor

Namespace syntax can be combined with type and universal selectors to control which namespaces are eligible to match:

Specifications

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

CSS Namespace Selector