@namespace
Quick Summary for @namespace
@namespace is an at-rule that defines XML namespaces to be used in a CSS style sheet.
Code Usage for @namespace
/* Default namespace */ @namespace url(XML-namespace-URL); @namespace "XML-namespace-URL";  /* Prefixed namespace */ @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL"; 
More Details for @namespace

@namespace

@namespace is an at-rule that defines XML namespaces to be used in a CSS style sheet.

Syntax

/* Default namespace */ @namespace url(XML-namespace-URL); @namespace "XML-namespace-URL";  /* Prefixed namespace */ @namespace prefix url(XML-namespace-URL); @namespace prefix "XML-namespace-URL"; 

Description

The defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace. The @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML5 with inline SVG or MathML, or XML that mixes multiple vocabularies.

Any @namespace rules must follow all @charset and @import rules, and precede all other at-rules and style declarations in a style sheet.

@namespace can be used to define the default namespace for 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 in that namespace.

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

In HTML5, known foreign elements will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (http://www.w3.org/1999/xhtml), even if there is no xmlns attribute anywhere in the document, and the <svg> and <math> elements will be assigned their proper namespaces (http://www.w3.org/2000/svg and http://www.w3.org/1998/Math/MathML).

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

Formal syntax

@namespace <namespace-prefix>? [ <string> | <url> ];

where <namespace-prefix> = <ident>

Examples

Specifying default and prefixed namespaces

@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 unprefixed namespace */ a {}  /* This matches all SVG <a> elements */ svg|a {}  /* This matches both XHTML and SVG <a> elements */ *|a {} 

Specifications

Specification
CSS Namespaces Module Level 3 # declaration

See also

Namespaces crash course Select your preferred language English (US)EspañolFrançais日本語한국어Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
You want to be the best, you MUST put the long yards in! Nothing comes easy in life so stop wishing and start DOING! So many people would rather bitch and moan than help themselves. Dont be one of those negative drainers, start today, make a small change and keep going forwards with this attitude!
Unknown
Random CSS Property

scroll-snap-type

The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
scroll-snap-type css reference