css / latest / css_namespaces.html

CSS namespaces

The CSS namespaces module defines the syntax for using namespaces in CSS.

CSS isn't just for styling HTML. A stylesheet may be used to style SVG, MathML, XML, or HTML, each of which has a different namespace or a document containing multiple namespaces.

The @namespace at-rule defined in this module enables distinguishing between same-named elements in different namespaces. Element tag names are not unique to a single language. For example, the <a> element isn't limited to HTML. You may want to style the <a>s within your SVGs differently from the links in your HTML. You also will likely want to ensure that querySelectorAll("a") selects the right kind of element. Namespacing can help.

The @namespace rule is used for declaring a default namespace and for binding namespaces to namespace prefixes. The namespaces module also defines the syntax for using these prefixes to represent namespace-qualified names. That's it. What a name means or if the name is even valid depends on the context and host language.

Reference

At-rules

Guides

Namespaces crash course

Deep dive into what a namespace is and how they are used in XML and XML-based markup languages.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSS_namespaces 1 12 1 9 8 1 37 18 4 14 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_namespaces