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
/* unvisited links */
A:visited /* visited links */
A:hover /* user hovers over link*/
A:active /* 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.
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 2 of 3 pages < 1 2 3 >
I make a link text-decoration:none so it doesnt underline my link.
BUT
I want hover text-decoration:underline
it only works the first time, when visited, there is no more hover effect.
Help.
John said:
So how do I do "onClick"
ie. when a link is clicked it changes to another colour?
-----
that one would be the a:active
Deedee said:
Can you help me.
I make a link text-decoration:none so it doesn't underline my link.
BUT
I want hover text-decoration:underline
it only works the first time, when visited, there is no more hover effect.
Help.
-----
Add the text-decoration part to a:visited also. That should fix it up.
priya said:
i want to use two css styles for link on a same page.that is i want two styles for same page only for link
------
What do you mean? If you mean that you want different effects for different types of links, then you'd have to add another class definition.
above it says..
":lang(fr) { font-weight: bold; }
This gives elements that are determined by the browser as French (using a variety of methods) a bold font."
i think thats saying that if the browser finds a block of text and determines that it is written in french, it will display that text as bold. i assume there are various codes other than 'fr' to specify what language u are looking for