Friday, 20 August 2010

CSS Pseudo clases

Just a quick heads up for anyone who reads this and has suffered a problem with this, but CSS pseudo classes need to be expressed in a particular way to guarantee that they work:

Normally in css, you will define things with a particular id using #(id) and a class is .(classname)

The pseudo class allows you to define particular behaviour, for example, if you want something to change appearence when you hover over it you would use :hover

So, to combine them, if you want everything with a particular class to look a particular way when you hover on it, you might want to try .(classname):hover

However, this does not always work (in Firefox), as I found out five minutes ago.

I was dealing with divs, and the solution was to say div.(classname):hover

So, when using pseudo classes, in order to make sure things work, try to be as precise as possible - (tagname).(classname):(pseudoclass)


[edit]
However, I subsequently discovered that the hover pseudo class is only valid for links ("a" tags) in IE.
In order ot make them behave like divs, make the use display:block, and if you really want to, remove the href.

1 comment:

Anonymous said...

I should digg your article therefore more people are able to see it, really helpful, I had a hard time finding the results searching on the web, thanks.

- Norman