By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

The CSS Active Selector

The active selector applies to links that are being clicked.

Created: 2012-10-11 10:37

The CSS :active selector applies to links that are being clicked – that is in the moment between the mouse button being pressed and released. The :active CSS selector does not do what you would expect it to do – it will not apply to links to the page currently being viewed.

If you want to apply a different style to links pointing to the page currently being viewed, then its best to use server-side programming to give the link a unique ID – better yet, disable it entirely by removing the anchor element – a link pointing to the page currently being viewed is pointless.

If you are still interested in using CSS, the :focus selector may give you a better result than :active.

Using the CSS Active Selector

Below is an example of how you can use :active on links, the effect can be hard to notice, so a lot of designers would simply leave it out.

CSS :active Example:

a:active { color: blue; }

Giving the real active link a unique ID on the server-side can be much better, styling it can then be done with something like:

#MyUniqueID { color: blue; }

CSS Tutorials

You may find the below Tutorials helpful.

  1. Effects on Links in HTML and CSS