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" |
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
