CSS: use of the @namespace rule

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.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.