@namespace

The @namespace CSS at-rule declares a namespace prefix and associates it with a given namespace name.

@namespace prefix string;
                

For example:

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

The svg in the above example is the namespace prefix. The string wrapped in quotation marks is a URL that does not refer to an actual location online—it just refers to the SVG namespace, and is just an easy way to understand what that namespace is referring to when someone is reading the source code of the document (Divya Manian, 2010).

Declaring and Using namespaces

Namespaces, specifically XML namespaces, are used for providing uniquely named elements and attributes in an XML document. They are defined in a W3C recommendation. Two XML instances (for example XHTML and SVG) may contain the same element or attribute names. Using namespaces, the ambiguity between identically named elements or attributes can be resolved. So, the @namespace at-rule is generally only useful when dealing with an XML document containing multiple namespaces — for example, an XHTML document with SVG embedded.

By using @namespace, you can declare namespaces that will be used in the style sheet. A simple example to help understand how a namespace would be used is the following: Suppose you have some embedded/inline SVG in an HTML document, and that SVG contains anchor tags (<a>). The anchors are referred to in CSS using the element name a. Now, suppose you want to target or select anchors that are part of the SVG namespace, not the HTML namespace. Using a similar declaration to the one above

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

we can declare the SVG namespace, and a prefix (the svg word). Once a prefix is specified, you can refer to elements in that namespace ("http://www.w3.org/2000/svg") by prepending the prefix and a vertical bar, |, to the element selector, like so:

svg|a {
    /* ... */
}
                

The svg|a selector above matches the anchor tags in the SVG namespace ("http://www.w3.org/2000/svg").

Namespace prefixes are case-sensitive.

You can specify more than one namespace in a style sheet. For example:

@namespace "http://www.w3.org/1999/xhtml";  /* the XHTML namespace */
@namespace svg "http://www.w3.org/2000/svg";   /* The SVG namespace, with a defined prefix name (which can be anything) */
                

If you specify multiple namespaces, the namespace with no prefix will be the default namespace of the style sheet.

Using the above example, we can do the following in the style sheet:

a {
    /* styles */
}

svg|a {
    /* styles */
}
                

The a selector matches the <a> elements in the XHTML namespace, while the svg|a selector matches the <a> elements in the SVG namespace. If you are using the same stylesheet for both HTML and SVG documents, then it is best to separate out the styles for SVG and HTML to prevent any overlap.

If a namespace prefix or default namespace is declared more than once only the last declaration shall be used. Declaring a namespace prefix or default namespace more than once is nonconforming.

Namespace Scope

The namespace prefix is declared only within the style sheet in which its @namespace rule appears. It is not declared in any style sheets importing or imported by that style sheet, nor in any other style sheets applying to the document.

Trivia & Notes

A namespace is defined in a document as part of the markup too. If you declare a namespace with a prefix in CSS, the CSS selector with the prefix will match an element only if its markup namespace and CSS-defined namespace match. It’s not the prefix that really matters, it’s the namespace URI.

For example, consider the following CSS:

@namespace prefix "http://namespaceuyi.com/namespace";

prefix|el {
    /* ... */
}
                

And the following markup:

<tag xmlns:xyz="http://namespaceuri.com/namespace">
  <xyz:el>…</xyz:el>
</tag>
                

The selector prefix|el will match the el elements inside tag, only because the namespace declared on the tag is identical to the namespace declared in the CSS. The selector orefix|el will not, however, match the <xyz:el>…</xyz:el> in the following example, because the latter is defined as part of another namespace:

<tag xmlns:xyz="http://anotheruri.com/anotherns">
  <xyz:el>…</xyz:el>
</tag>
                

It will not even match the following <prefix:el>…</prefix:el>, even if the prefix name matches because, again, the URI is the part that should match:

<tag xmlns:xyz="http://anotheruri.com/anotherns">
  <prefix:el>…</prefix:el>
</tag>