CSS Pseudo-classes
Thursday, January 3rd, 2008Pseudo-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.
Popularity: 20%
