0% found this document useful (0 votes)
3 views2 pages

Understanding CSS Namespaces Syntax

The CSS namespaces module outlines the syntax for utilizing namespaces in CSS, allowing for the styling of various document types like SVG and MathML. It introduces the @namespace at-rule to differentiate elements with the same name across different namespaces, ensuring accurate selection and styling. The module also covers declaring default namespaces and binding them to prefixes for namespace-qualified names.

Uploaded by

Chhaya Yadav
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views2 pages

Understanding CSS Namespaces Syntax

The CSS namespaces module outlines the syntax for utilizing namespaces in CSS, allowing for the styling of various document types like SVG and MathML. It introduces the @namespace at-rule to differentiate elements with the same name across different namespaces, ensuring accurate selection and styling. The module also covers declaring default namespaces and binding them to prefixes for namespace-qualified names.

Uploaded by

Chhaya Yadav
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1/19/26, 6:17 PM

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 element isn't limited to HTML. You may want
to style the 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.

In this article Reference Guides Related concepts Specifications See also Hetzner
Cloud Server in Singapore! Starting at US$ 7.59 per month. Try now! Ad Reference
At-rules and descriptors @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 CSSNamespaceRule interface [Link]
property [Link] property [Link]() method
[Link]() method [Link]()
method [Link]() method [Link]() method
[Link]() method [Link]() method
[Link] property [Link]() method
[Link]() method [Link]() method
[Link]() method
[Link]() method
[Link]() method Namespace glossary term
Specifications Specification CSS Namespaces Module Level 3 See also SVG element
data type CSS at-rules CSS at-rule functions CSS selectors Help improve MDN

Was this page helpful to you?

Generated with [Link]


1/19/26, 6:17 PM

Yes

No Learn how to contribute This page was last modified on ⁨Dec 16, 2025⁩by MDN
contributors.

View this page on GitHub • Report a problem with this content Filter sidebar Filter
CSS Guides Modules Anchor positioning Animations Backgrounds and borders Basic
user interface Borders and box decorations Box alignment Box model Box sizing
Cascading and inheritance Color adjustment Colors Compositing and blending
Conditional rules Containment Counter styles CSSOM view Custom functions and
mixins Custom highlight API Custom properties for cascading variables Display
Easing functions Environment variables Filter effects Flexible box layout Font loading
Fonts Fragmentation Generated content Grid layout Images Inline layout Lists and
counters Logical properties and values Masking Media queries Motion path Multi-
column layout Namespaces Nesting Overflow Overscroll behavior Paged media
Positioned layout Properties and values API Pseudo-elements Round display Ruby
layout Scoping Scroll anchoring Scroll snap Scroll-driven animations Scrollbars
styling Selectors Shadow parts Shapes Syntax Table Text Text decoration Transforms
Transitions Values and units View transitions Viewport Writing modes Anchor
positioning Animations Backgrounds and borders Box alignment Box model Box
sizing Cascade Cascading variables Colors Columns Conditional rules Containment
CSSOM view Custom functions and mixins Display Environment variables Filter
effects Flexbox Fonts Grid Images Lists and counters Logical properties Masking
Media queries Nesting style rules Overflow Positioning Scroll anchoring Scroll-driven
animations Scroll snap Selectors Shapes Syntax Text Text decoration Transforms
Transitions Values and units Writing modes How to Layout cookbook Tools Border-
image generator Border-radius generator Box-shadow generator Color format
converter Color mixer Shape generator Reference Properties Selectors Combinators
Pseudo-classes Pseudo-elements At-rules Values Types Functions GitLab Ad Your
blueprint for a better internet.

MDN About Blog Mozilla careers Advertise with us MDN Plus Product help
Contribute MDN Community Community resources Writing guidelines MDN Discord
MDN on GitHub Developers Web technologies Learn web development Guides
Tutorials Glossary Hacks blog Website Privacy Notice Telemetry Settings Legal

Generated with [Link]

You might also like