Pseudo Classes

Pseudo classes are defined in your stylesheet by specifying a colon after the tag and following that with the predefined pseudo class name. Pseudo classes are predefined and refer either to the tag when it has a special state or to a particular part of the tag's content.

The a:link, a:active, a:hover, and a:visited define four different states that an anchor tag can have. When the link first appears the a:link entry is used. When your visitor moves their mouse over the link the a:hover entry is applied. Actually clicking on the link (or pressing enter while the link is selected) applies a:active and after the page that the link redirects to has been visited a:visited is used. All you need to do is to define styles for all four states and the appropriate one will be used depending on the state of the anchor at any given time.

The :hover pseudo class differs from the others already discussed because it can be applied to any tag while the other three can only be applied to the anchor tag.

The other two pseudo classes are :first-line and :first-letter. These two pseudo classes are not recognised by earlier browsers and so will not always product the expected result. These two can be used with any block tag and are used to apply special formatting to the first line and first character of text respectively within the block.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow