CSS @namespace At-Rule

CSS @namespace At-Rule

The @namespace at-rule declares an XML namespace for use in CSS selectors. It allows stylesheets to distinguish between elements with the same name in different namespaces, such as HTML and SVG links, and is particularly useful when a document contains multiple markup languages.

@namespace Syntax

@namespace url("namespace-URL");
@namespace prefix url("namespace-URL");

The @namespace at-rule associates a namespace URL with an optional prefix. Unlike most CSS at-rules, it ends with a semicolon and does not contain a declaration block.

Two forms are available:

• Default namespace: Omits the prefix and establishes a namespace for unprefixed type and universal selectors.
• Prefixed namespace: Assigns a prefix that can be used explicitly in selectors.

The namespace URL can be written using url() or a quoted string.

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

Both declarations identify the SVG namespace. Only one is needed.

The namespace URL identifies the namespace. It is not a stylesheet URL, and the browser does not need to download a resource from that address.

How @namespace Works

HTML, SVG, MathML, and XML can contain elements with identical names but different meanings. Namespaces identify the markup language to which an element belongs.

For example, both HTML and SVG support an <a> element. An ordinary CSS type selector can match elements with that name in either namespace.

@namespace svg url("http://www.w3.org/2000/svg");
svg|a {
  fill: #0056b3;
}

The prefix svg identifies the SVG namespace. The selector svg|a matches SVG links without selecting ordinary HTML links.

The vertical bar (|) separates the namespace prefix from the element name.

Namespace prefixes are identifiers used within the CSS stylesheet. They do not need to match prefixes used in the document's markup.

Default and Prefixed Namespaces

Default Namespace

A default namespace applies to unprefixed type and universal selectors.

@namespace url("http://www.w3.org/1999/xhtml");
a {
  color: #0056b3;
}

This declaration makes the XHTML namespace the default. The unprefixed a selector matches HTML links but not SVG links.

In HTML documents, HTML elements use the XHTML namespace even when the document does not contain an explicit xmlns attribute.

Prefixed Namespace

A prefixed namespace allows selectors to explicitly identify a particular namespace.

@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");
html|a {
  color: #0056b3;
}
svg|a {
  fill: #198754;
}

The html|a selector targets HTML links, while svg|a targets SVG links.

Multiple prefixed namespaces can be declared in the same stylesheet, allowing different markup languages to be styled independently.

Namespace Selectors

Namespace prefixes can be combined with type and universal selectors to control which elements are matched.

Selecting SVG Elements

@namespace svg url("http://www.w3.org/2000/svg");
svg|circle {
  fill: #0056b3;
}
svg|rect {
  fill: #198754;
}

These rules style SVG circles and rectangles without affecting elements from other namespaces.

Selecting Across Namespaces

@namespace svg url("http://www.w3.org/2000/svg");
*|a {
  text-decoration: underline;
}

The wildcard namespace prefix *| allows the selector to match links in HTML, SVG, or other namespaces.

An undeclared namespace prefix makes a namespace-qualified selector invalid. Declare each prefix before using it.

Namespace Attribute Selectors

Namespace prefixes can also be used in attribute selectors when an attribute belongs to a specific namespace.

@namespace xlink url("http://www.w3.org/1999/xlink");
[xlink|href] {
  cursor: pointer;
}

This selector matches elements containing an href attribute in the XLink namespace.

Unlike type selectors, unprefixed attribute selectors are not restricted by the stylesheet's default namespace.

@namespace url("http://www.w3.org/2000/svg");
[href] {
  cursor: pointer;
}

The [href] selector matches attributes named href without a namespace. The default SVG namespace does not change how this attribute selector works.

Namespace-qualified attribute selectors are most useful when working with XML documents or namespaced attributes. For ordinary HTML attributes, a standard attribute selector is generally sufficient.

Rule Placement and Scope

The @namespace at-rule has specific placement requirements within a stylesheet.

Namespace declarations must appear after any @charset and @import rules and before ordinary style rules and other at-rules.

Correct Placement

@import url("base.css");
@namespace svg url("http://www.w3.org/2000/svg");
svg|circle {
  fill: #0056b3;
}

The namespace is declared before the selector that uses it.

Incorrect Placement

p {
  color: #333;
}
@namespace svg url("http://www.w3.org/2000/svg");

This namespace declaration appears after a style rule and is invalid. The browser ignores the misplaced @namespace rule.

Stylesheet Scope

A namespace prefix applies only within the stylesheet where it is declared. It is not automatically shared with imported stylesheets or other stylesheets on the page.

Each stylesheet that uses namespace-qualified selectors must declare the required prefixes.

Namespace prefixes are case-sensitive. For example, svg and SVG are different prefixes.

@namespace Example

The following example uses the @namespace at-rule to style an HTML link and an SVG link differently, even though both use the <a> element.

HTML

<p>
  <a href="https://www.example.com">HTML Link</a>
</p>
<svg width="200" height="45" xmlns="http://www.w3.org/2000/svg">
  <a href="https://www.example.com">
    <text x="10" y="30">SVG Link</text>
  </a>
</svg>

CSS

@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");
html|a {
  color: #0056b3;
  font-weight: bold;
}
svg|a {
  fill: #198754;
  text-decoration: underline;
}

Play in Editor

The HTML link appears blue and bold, while the SVG link appears green and underlined. Each namespace-qualified selector targets only the corresponding type of link.

Browser Support

The @namespace at-rule is Baseline Widely available and supported across all major modern browsers. See Can I Use? for detailed compatibility information.

Specifications

The @namespace at-rule is defined in CSS Namespaces Module Level 3. The specification establishes how stylesheets declare namespaces and associate namespace prefixes with element and attribute names.

CSS Namespaces Module Level 3