Anne van Kesteren

Styling different sections different

Imagine you use XHTML1.0 and you use different background effects for different sections (of course you use the id attribute on the root element for use style sheets). How are you going to do that? We have not so many options I think:

  1. Hacking the DTD to add the class attribute to the root element (feels like a hack), however this is not an option for many of us, it is to complicated (if we ignore the fact that this isn't supported).
  2. Using the 'second' id attribute on the body element. If you choose that option, you will have to migrate back to HTML4, since you need to style the root element in XML. If you choose this option, you will have to add a class next to the id attribute.*
  3. The last option would be adding a extra style sheet to every page that is different. Now that's ugly!

* Remember that it is possible to style the root element in HTML4 as well. Using only the body element limits your markup, since you need more divs for reaching the same end results.

A possible solution is to add the ability to the id attribute of containing multiple values, just like the class attribute:

<html id="annevankesteren-nl archives">

The best solution IMHO would be to extend the possibilities of user-css-styling. There should be a new at-rule. It could be like this:

@address ""{
 /* user specific styling */

"" would match any URI, which contains this string. :contains() would also be an option, but I don't know how the syntax is for at-rules. I think this one is quite good.

Back to the id attribute. If xml:id is finally legalized, see the specification for xml:id, there is not a single problem anymore in XHTML1.1 and it would be far more easier to style other XML documents or to use the DOM model in XML documents. Especially the getElementById() function.


  1. If xml:id is finally legalized [...] there is not a single problem anymore in XHTML1.1

    Really? Sounds too good to be true. I'm sure I could dig up something :)

    Otherwise, I think you summed up all the styling alternatives quite nicely. Seems like most people use the last option, the ugly one.

    On a sidenote, did you consider using an ordered list for your styling alternatives? I just reflected on this as I typed "the last option". It would have been easier, I think, to refer to one of the alternatives by number.

    Posted by Lars Holst at

  2. Good call! I changed it into a ordered list.

    I was also thinking about giving the id attribute values of website-com-contact and website-com-store for different page stylings. Now I say this, this is the best option!

    People could get website-com out of that by using a attribute selector: [id*=website-com]. So the attribute contains website-com. Problem solved, when I have time I will update the post.

    Posted by Anne at