An interesting feature of CSS3 namespace selectors that came up during some of my random tests concerns the use of the
@namespace rule. This rule looks like any other at-rule, except that it accepts two parameters instead of one. The first parameter
is important, because it tells the browser from which element it must start to select elements through CSS selectors. The second parameter,
instead, is simply the namespace URI you're going to use. In its pure form it looks as follows:
@namespace element 'URI';
Let's look at what happens with a sample XHTML document that contains only a single paragraph. In our first attempt, we'll try this:
@namespace html 'http://www.w3.org/1999/xhtml';
html|p {color: green}
body|p {color: red}
The text's color will be green because our namespace rule tells the browser to use the html element. Now let's try a different approach:
@namespace body 'http://www.w3.org/1999/xhtml';
html|p {color: green}
body|p {color: red}
In this case the text will be red, because now our starting element is body. In other terms: we can attach a given namespace to different elements
on a document by specifying their name as the first parameter of the @namespace rule.