Namespaces in elemental selectors

Type selectors and universal selectors allow an optional namespace component: a namespace prefix that has been previously declared may be prepended to the element name separated by the namespace separator “vertical bar” (| U+007C).

It has the following meaning in each form:

ns|E
elements with name E in namespace ns

*|E
elements with name E in any namespace, including those without a namespace

|E
elements with name E without a namespace

E
if no default namespace has been declared for selectors, this is equivalent to *|E. Otherwise it is equivalent to ns|E where ns is the default namespace.

Example

@namespace foo url(http://www.example.com);
foo|h1 { color: blue }  /* first rule */
foo|* { color: yellow } /* second rule */
|h1 { color: red }      /* ...*/
*|h1 { color: green }
h1 { color: green }

The first rule (not counting the @namespace at-rule) will match only h1 elements in the “http://www.example.com” namespace.
The second rule will match all elements in the “http://www.example.com” namespace.
The third rule will match only h1 elements with no namespace.
The fourth rule will match h1 elements in any namespace (including those without any namespace).
The last rule is equivalent to the fourth rule because no default namespace has been defined.

If a default namespace is declared, compound selectors without type selectors in them still only match elements in that default namespace.

@namespace url("http://example.com/foo");

.special { ... }

The .special selector only matches elements in the “http://example.com/foo” namespace, even though no reference to the type name (which is paired with the namespace in the DOM) appeared.