ncyoung.com

attribute selectors

This entry is in the following categories:

Using attribute selectors, you can apply styles to HTML tags with specific atribute values.

I've used this to add annotation comments to a page using css. This is not a normal use of css, but rather a hack for the fact that web browsing clients do not support linkBases well.

The example: Clickstream, a web traffic analysis tool, creates a report called the "referre next report". This shows the number of people and percentage of people who leave the page by each URL on the page.

To display the data in the page, I created a regular expression to convert the data to a set of css styles. One declaration looks like this:

a[href="http://ncyoung.com/grab_bag/peeps.html"]:after {
content:"(3 clicks, 20%)";
color:red;
}

The a tag:

<a href="http://ncyoung.com/grab_bag/peeps.html">peeps</a>

Then gets the content appended to it. (Note, the CSS2 psuedo class "after" only works in Opera 7 and recent Mozilla versions, so this demo will not work in IE).

Here are the style and url in html so you can see the effect:


peeps

attribute selectors



Dated: 08/20/2003