mozilla

Revision 473843 of @namespace

  • Revision slug: Web/CSS/@namespace
  • Revision title: @namespace
  • Revision id: 473843
  • Created:
  • Creator: Np
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The @namespace rule is an at-rule that defines the XML namespaces that will be used in the style sheet. The namespaces defined can be used to restrict the universal, type, and attribute selectors to only select elements under that namespace. The @namespace rule is generally only useful when dealing with an XML document containing multiple namespaces: for example, an XHTML document with SVG embedded.

The @namespace rule can be used to define the default namespace for the stylesheet or to define namespace prefixes to be used in the style sheet. When a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements on that namespace.

The @namespace rule can also be used to define a namespace prefix for a stylesheet. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace (and not just the name) of the element or attribute matches.

When using non-XML HTML, known elements will be automatically be assigned namespaces. This means that HTML elements will act as though they are on the XHTML namespace, even if there is no xmlns attribute anywhere in the HTML document.

Note that in XML, unless a prefix is defined directly on an attribute, that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behaviour, the default namespace in CSS does not apply to attribute selectors.

Syntax

For a default namespace:

@namespace url(XML-namespace-URL);

For a namespace prefix:

​@namespace prefix url(XML-namespace-URL);

Examples

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

/* This matches all XHTML <a> elements, as XHTML is the default namespace */
a {}

/* This matches all SVG <a> elements */
svg|a {}

/* This matches both XHTML and SVG <a> elements */
*|a {}

Specifications

CSS3 Namespaces Module - W3 Recommendation.

Browser compatibility

?

See also

  • {{ CSS_at_rules() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The&nbsp;<code style="font-size: 14px;">@namespace</code>&nbsp;rule is an at-rule that defines the <a href="/en-US/docs/Namespaces">XML namespaces</a> that will be used in the style sheet. The namespaces defined can be used to restrict the <a href="/en-US/docs/Web/CSS/Universal_selectors">universal</a>, <a href="/en-US/docs/Web/CSS/Type_selectors">type</a>, and <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute</a> selectors to only select elements under that namespace.&nbsp;<span style="line-height: 1.572;">The&nbsp;</span><code style="font-size: 14px;">@namespace</code><span style="line-height: 1.572;">&nbsp;rule is generally only useful when dealing with an XML document containing multiple namespaces: for example, an XHTML document with SVG embedded.</span></p>
<p>The&nbsp;<code style="font-size: 14px;">@namespace</code>&nbsp;rule can be used to define the <strong>default namespace</strong> for the stylesheet or to define namespace prefixes to be used in the style sheet. When a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements on that namespace.</p>
<p>The&nbsp;<code style="font-size: 14px;">@namespace</code>&nbsp;rule can also be used to define a <strong>namespace prefix</strong> for a stylesheet. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace (and not just the name) of the element or attribute matches.</p>
<p><span style="line-height: 1.572;">When using non-XML HTML, known elements will be automatically be assigned namespaces. This means that HTML elements will act as though they are on the XHTML namespace, even if there is no&nbsp;</span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">xmlns</span><span style="line-height: 1.572;">&nbsp;attribute anywhere in the HTML document.</span></p>
<p><span style="line-height: 1.572;">Note that in XML, unless a prefix is defined directly on an attribute, that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behaviour, the default namespace in CSS does not apply to attribute selectors.</span></p>
<h2 id="Syntax">Syntax</h2>
<p>For a default namespace:</p>
<pre>
@namespace url(<em>XML-namespace-URL</em>);</pre>
<p><span style="line-height: 1.572;">For a namespace prefix:</span></p>
<pre>
<span style="line-height: 1.572;">​@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);</span></pre>
<h2 id="Examples">Examples</h2>
<pre class="brush: css" style="font-size: 14px;">
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* This matches all XHTML &lt;a&gt; elements, as XHTML is the default namespace */
a {}

/* This matches all SVG &lt;a&gt; elements */
svg|a {}

/* This matches both XHTML and SVG &lt;a&gt; elements */
*|a {}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<p name="Browser_compatibility"><a href="http://www.w3.org/TR/css3-namespace/">CSS3 Namespaces Module</a> - W3 Recommendation.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>?</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_at_rules() }}</li>
</ul>
Revert to this revision