Anne van Kesteren

Power of CSS3 selectors

In styling different sections different I tried to found a method for styling different pages with a single style sheet different, while still give the user the advantage of making a specific style sheet for your page (I had to read this sentence another time as well :)).

I found a solution for that problem, but for users who use IE it is getting more difficult (but who uses IE and has costum style sheets :)). The value for the id attribute is always: domain-extension. If everyone does it that way, there shouldn't be any problems. I you have four section on your site, like: "contact", "about", "home" and "weblog" you could make this id value: domain-extension-section. To style such a page you only have to use a descendent combinator:

html#annevankesteren-nl-contact h1{

Not really difficult is it? If you have something that should specified sitewide you just leave out the id selector. Now, let's look from the user's point of view. How can he style your page, sitewide? Quite easy actually. He or she should use a CSS3 attribute selector, like this:

[id*=annevankesteren-nl] h1{
 color:#000 !important;

This selects any id attribute (which is unique) on a page which contains that value, like annevankesteren-nl-about. In IE you would have to know any single id attribute and apply the rule to any of them, which is not what you want :).

In future sites I'm going to use this method, but I think it is still not good for the end user. He can do this, but there must be specified an id attribute. He also has to use a descendent combinator for everything. That is a bad thing IMO, 'cause that will increase the file size with lots of kb's. That's why there should be made/created an at-rule for such things, like @address.


  1. This seems to me to be an accessibility matter. So you could try running it by the Accessify forum to see what people think:

    They're pretty clued up on access over there. For example, there are people who have specific experience of working with students who use user-defined stylesheets to overcome specific access problems

    Posted by Michael at

  2. Thanks for the tip, I opened a thread. General conclusion: "users don't use user style sheets" :).

    Posted by Anne at