CSS namespaces

{{CSSRef}} 

The CSS namespaces module defines the syntax for using {{glossary("namespace", "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 {{domxref("Document.querySelectorAll", "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

• {{cssxref("@namespace")}} 

Guides

• Namespaces crash course

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

Related concepts

• CSS namespace separator (|) combinator
• CSS type selectors
• CSS universal selector
• {{DOMXRef("CSSNamespaceRule")}}  interface
  • {{DOMXRef("CSSNamespaceRule.namespaceURI")}}  property
  • {{DOMXRef("CSSNamespaceRule.prefix")}}  property
• Document.createAttributeNS() method
• Document.createElementNS() method
• Document.getElementsByTagNameNS() method
• Element.getAttributeNodeNS() method
• Element.getAttributeNS() method
• Element.getElementsByTagNameNS() method
• Element.hasAttributeNS() method
• Element.namespaceURI property
• Element.removeAttributeNS() method
• Element.setAttributeNS() method
• Element.setAttributeNodeNS() method
• NamedNodeMap.getNamedItemNS() method
• NamedNodeMap.removeNamedItemNS() method
• NamedNodeMap.setNamedItemNS() method
• {{glossary("Namespace")}}  glossary term

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• <a> SVG element
• CSS <url> type
• CSS at-rules
• CSS at-rule functions
• CSS selectors