Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Links & Buttons: Other: Here

CSS Pseudo-classes

Author: CSS Drive

Pseudo-class are an interesting group of selectors in CSS that apply to elements when they're in a certain state or condition, such as with a link, when the mouse is over it. This makes for some interesting and lightweight visual effects.

Pseudo-class (CSS2.1) Description Applies to
:link Applies to links that have not been visited. links
:visited Applies to links that have been visited. links
:hover Applies to an element which the mouse is currently over. all
:active Applies to an element currently being activated by the user (ie: the mouse is held down over). all
:focus Applies to an element while it has the user focus. all
:first-child Matches an element that is the first child of some other element. all
:first-letter Applies to the first letter of a paragraph. block level elements
:first-line Applies to the first formatted line of a paragraph. block level elements
:lang Applies to an element when it's in the designated language. all

The first four pseudo classes are typically used on links, even though 3rd and 4th apply to elements in general. This is because in IE (as of IE6), ":hover" and ":active" don't work on elements other than links.

CSS Example #1 (link pseudo-classes):

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { background-color: yellow } /* user hovers over link*/
A:active  { color: lime }   /* active links    */

This is a very common CSS definition to manipulate the look of links on the page. The order in which you define the four selectors is important, typically known as LVHA (link visited hover active). If you alter the order, some of your selectors will be suppressed and not take effect due to the way CSS handles cascade/ ordering.

CSS Example #2 (:first-child pseudo-class):

img:first-child{ border: 1px solid gray; }

This applies a border to any image that is the first child of another element.

CSS Example #3 (:lang pseudo-class):

:lang(fr) { font-weight: bold; }

This gives elements that are determined by the browser as French (using a variety of methods) a bold font.

Code Info

Rate this code:

Date Posted: 05/03/2006

Revision History: None

Usage Terms: Click here

Your Comments (29)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 3 of 3 pages  <  1 2 3

nice now my friends dont need to say about the visited links not changing color
Posted by soulsteel on 08/21, 01:16 PM
Once a link has been visited it changes color as expected but it stays that color even when I sign in another time. How do I get it to refresh...I only want to see the visited links that color for that sign in.
Posted by Mary Sicard on 12/02, 04:52 PM
I have the same problem with John,

So how do I do "onClick"
ie. when a link is clicked it changes to another colour?

when I use lightbox, I click a link show something, but the link not change to visited color, anyone can help, thanks.
Posted by Vincent on 12/19, 11:59 PM
Don't forget support is spotty - a good summary would have been nice.
Posted by Rich on 02/16, 06:15 PM
begining. thank for sharing.
Posted by rack on 04/17, 10:53 PM
Great share CSS Drive and the info is certainly handy and quick to understand. Thanks for your post
Posted by Cathy on 05/25, 02:33 AM
Can you differentiate between a URL link and an "email" link for say text color(s).
Posted by John on 06/17, 09:33 AM
This is the good knowledge for css, I have used this below site for totally CSS and DIV based:

Posted by Satya on 05/11, 11:13 PM
It really does have some nice features. Thanks for sharing.
Posted by Think Flick on 06/02, 11:34 PM

Comment Pages 3 of 3 pages  <  1 2 3

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.