The :active Pseudo Class

Question: I can't get the :active pseudo class to work.

Answer: The first thing to check is that you have the pseudo classes defined in the right order. There are two orders that will work.

The reason for these orders is that all links satisfy a:link and therefore if any others come before that they will be overridden. The focus, hover, and active are dynamic states that can apply to any link visited or not and so need to come after visited. The hover refers to where the mouse cursor moves onto the link and focus is where the keyboard cursor is tabbed onto the link and so they are independent of one another and can be in either order.

The active pseudo class must always come last because the link must either have the mouse hovering on it or the keyboard focused on it before you can make it active. To make the link active when the keyboard focuses on it you press the enter key. It will be active until you release the key. To make it active when the mouse cursor is hovering over it press the primary mouse button. The link will be active while the mouse button is depressed.

The active state is the most transient of all the alternatives since it only has that state while a button is actually depressed on the mouse or keyboard. That is why it is so difficult for people to see that the style changes they defined for that state actually work.

The other reason why some people think their active pseudo class isn't working is where they have misunderstood what it means.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow