Skip to: content, navigation

@namespace

Spec
Version
CSS3
Browser support (more…)
IE7 FF2+ SA3 OP9.2+
None Full None Full

Syntax

@namespace  [ prefix  ] URI;

Description

The @namespace at-rule declares an XML namespace and, optionally, a prefix with which we can refer to it. @namespace rules must follow all @charset and @import rules, and precede all other at-rules and rule sets in a style sheet.

The scope of an @namespace rule is the style sheet in which it’s declared—it doesn’t extend to imported style sheets.

If no prefix is specified in the @namespace rule, the rule defines the default namespace.

If a prefix is specified, you can refer to elements in that namespace by prepending the prefix and a vertical bar, |, to the element selector, like so:1

@namespace "http://www.w3.org/1999/xhtml";
@namespace foo "http://example.com/ns/foo";

table {
  ⋮ declarations
}
foo|bar {
  ⋮ declarations
}

In the example above, the table selector matches table elements in the XHTML namespace, while the foo|bar selector matches bar elements in the namespace referred to by the prefix foo.

Note: Namespaces

The namespace URI is the most important component of a namespace declaration. Consider this style sheet:

@namespace foo "http://example.com/ns/foo";
foo|bar {
  ⋮ declarations
}

The foo|bar selector in the above example would match the <xyz:bar>…</xyz:bar> element in this markup fragment because the namespace URI in the markup matches the namespace URI in the at-rule:

<abc xmlns:xyz="http://example.com/ns/foo">
  <xyz:bar>…</xyz:bar>
</abc>

However, it would not match the <foo:bar>…</foo:bar> element in this markup fragment, since that element’s in another namespace (that is, the URI doesn’t match):

<abc xmlns:foo="http://example.com/ns/xyz">
  <foo:bar>…</foo:bar>
</abc>

Thus, it’s not the prefix, but the corresponding namespace URIs in the markup and at-rule, that must match.

Example

The first example below declares a default namespace; the second declares that the prefix svg can be used to refer to elements from the SVG namespace, "http://www.w3.org/2000/svg":

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

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
None None None None None Full None None None Full Full

This at-rule isn’t widely supported.

Footnotes

1 It would have been more intuitive to use a colon separator than the vertical bar, but the colon character is already used for other purposes in selectors—more about this in Pseudo-classes.

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search