CSS Examples Pseudo-classes of CSS

Date: 01/16/2005 Pseudo-classes of CSS

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.

Comments (3)

css Font examples , Properties , Attribute - - //

#1: css örneği on 06/27 at 01:35 PM

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

#2: Html Lessons on 07/05 at 01:50 PM

im sooooo confused...

what are these pseudo classes....
gotta push on a keep reading

Love your site!

- Kay
mood: confused!
music: coldplay - clocks
currently: [url="http://www.kaysbargains.com"]online

#3: Kay on 07/18 at 06:31 PM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site