It’s Time for Pseudo Classes!

July 21st, 2010

Do you know what pseudo classes in CSS are? I did not until a couple of years ago, even though I have been using them for close to a decade. According to the W3C, pseudo elements are:

“Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information”

If you develop websites, as I do, you most likely have been using them for years as well. Does this look familiar:

1. a:link
2. a:visited
3. a:hover
4. a:active

So the state of the link is not itself in the document tree (the html), but we can reference it in our CSS.

So why is it time to explore these very nifty developments in CSS now? Two reasons:

1. As we can see at CSS3.info the number of selectors that are available to most browsers has grown in recent years.
2. And the IE7/IE8 project, spear-headed by Dean Edwards, which in their words is – “A JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.”

A quick look at this page of examples will show you how many more pseudo selectors this tiny bit of javascript code can add. I have used the code for years, and there is a google group available for bug reporting and support.

Learning to use pseudo classes not only will add more ways of reaching items on your page, they will also help you get more out of the powerful javascript library jQuery.

In the past I decided not to dive too deeply into learning new CSS tricks that I could not make much use of due to IE5.5 and IE6 limitations. However with IE6 in it’s waning days, and the ability to shore up some of it’s short comings with the IE7-Javascript code, now is the time to jump in and an make us of these tools.