CSS @namespace At-Rule

The CSS @namespace at-rule declares a namespace prefix and associates it with a given namespace name. It can also be used to declare a (non-prefixed) default namespace.

Once declared, any namespace prefix can then be used in namespace-qualified names, such as in XML or SVG.

Here's an example:

This example declares svg as a namespace prefix. This prefix is used to apply the namespace http://www.w3.org/2000/svg where the svg namespace prefix is used.

The @namespace rule accepts a namespace prefix and a URI. Like this:

The prefix is a <custom-ident> data type and the URI can be represented as either a <string> or by using the <url> syntax.

However, even if you use the <url> syntax, it is treated as a literal <string>. So the URI does not necessarily need to satisfy the requirements of the <url> data type. All strings — including the empty string and strings representing invalid URIs — are valid namespace names when using the @namespace at-rule.

So the following are both valid @namespace declarations:

Uses for the @namespace Rule

Namespaces can be used to restrict the universal, type, and attribute selectors to only certain elements within that namespace.

The @namespace at-rule is typically used for documents that have multiple namespaces. For example, an HTML document that also contains inline SVG.

The @namespace rule can be used to declare a default namespace or a prefixed namespace.

Default Namespaces

When you declare a default namespace, all universal and type selectors (but not attribute selectors) apply only to elements in that namespace. You can create a default namespace by omitting any prefix.


Prefixed Namespaces

Using a prefix binds the namespace to that prefix. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace and the name of the element or attribute matches.

Where to put the @namespace Rule?

The @namespace at-rule must come after any @charset and @import rules, but before any other at-rules and style rules.

Like this:

Official Specifications