The Niklas Lindblad Organisation

Most of the time you refer to elements within your stylesheet you do it using IDs or classes. What many people do not know is that you can refer to elements based on any attribute within them.

Now to a clear but not so usable example to illustrate how this works. On your page you have links pointing at #top (the top of your page). The XHTML code for these links are:

Back to top

If you would like to make them different from the regular links using CSS, you would probably first put them all in a class so that you could easily refer to them inside the CSS.

But instead of wasting a class for this we could just choose to style by refering to all elements with the href-attribute set to “#top”. In CSS that would look like:

a[href="#top"] { style information }

No additional changes to the XHTML code would be needed.

A test page with a better example is available

Note! Although this is part of the CSS standard older versions of IE does not support it (suprised?), version 7 does though. It works fine in browsers like Opera and Mozilla Firefox however.

This entry was posted on Thursday, July 20th, 2006 at 10:42 pm and is filed under Writing. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.