A pseudo-class is a way of selecting certain special properties of some HTML elements. These special properties are not similar to id,
title, or other well-known properties. These special properties are about the condition or state of an element. Some of the pseudo-classes are
used for active actions such
as moving your mouse over an element, where others are passive such as marking a link appear visited based on your browsing history. Unlike
pseudo-classes, pseudo-elements are for the selection of elements that are nowhere to be found in the DOM tree,
such as for selecting the first letter of a paragraph element. Starting with CSS3, pseudo-elements use two colons
instead of one colon, but using one colon will continue to work with modern browsers. If you use a double colon for your pseudo-elements, please note
that some older browsers may not support it.
Pseudo-class
The following examples are pseudo-classes for CSS1 and CSS2. We will cover the pseudo-classes for CSS3 in another article.
| Pseudo-class | Example | Description |
|---|
| :link | a:link | Selects all unvisited links |
| :visited | a:visited | Selects all visited links |
| :active | a:active | Selects the active link |
| :hover | a:hover | Selects links on mouse over |
| :focus | input:focus | Selects the input element which has focus |
Pseudo-element
Pseudo-elements do not exist explicitly in the DOM tree, as they are somewhat imaginary. In CSS1 and CSS2, pseudo-elements start with a colon (:), just like pseudo-classes.
In CSS3, pseudo-elements start with a double colon (::), which differentiates them from pseudo-classes. You should note that Internet Explorer only supports :first-line and :first-letter
selectors.
| Pseudo-element | Example | Description |
|---|
| :first-letter | p:first-letter | Selects the first letter of every paragraph element |
| :first-line | p:first-line | Selects the first line of every paragraph element |
| :first-child | p:first-child | Selects every paragraph elements that is the first child of its parent |
| :before | p:before | Insert content before every paragraph element |
| :after | p:after | Insert content after every paragraph element |
| :lang(language) | p:lang(es) | Selects every paragraph element with a lang attribute value starting with
"es" |
Please help us spread the word by socializing it today!
Did you find something wrong with the information on this page? Please take a moment to report it to us
so that we can continue to improve the quality of the information on this site. Click here to
report an issue with this page.
Recommended Books & Training Resources
