Using CSS3 namespace selectors on a blog feed

Let's start with an XML fragment taken from a well-known blog:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<rdf:RDF xmlns="" xmlns:dc="" xmlns:rdf="" xml:base="">
 <channel rdf:about="">
  <title>Anne’s Weblog about Markup & Style - HREF</title>
  <description>Links matter</description>

Now let's use our CSS3 namespace selectors:

@namespace RDF "";
@namespace dc "";
@namespace rdf "";

rdf|RDF {

    display: block;
    background: #eee;
    color: #333;
    margin: 0;
    width: 100%;
    font: 76% Arial, sans-serif;


channel {

    width: 60%;
    margin: 2em auto;
    padding: 1em;
    background: #fff;
    font-size: 1.2em;
    display: block; 
    border: 5px solid gray;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;


channel title {

    display: block;
    font: 2em "Trebuchet MS", Trebuchet, sans-serif;
    color: #454545;
    margin-bottom: 0.2em;
    border-bottom: 4px double;
    padding-bottom: 2px;


channel description {

    display: block;
    padding: 5px;
    margin-top: 5px;
    font-family: Georgia, serif;
    font-style: italic;


channel link {

    display: block;
    margin-bottom: 0.3em;
    color: #338;
    cursor: pointer;


channel dc|date {

    display: block;
    font-size: small;
    margin: 0 0 0.5em 0;
    padding: 0.3em;
    background: #f5f5f5;
    border: 1px solid #cbcbbb;


We've declared all the namespace used throughout the document and used the suffix selectors to match the elements we want to stylize. You can see the result below.

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.