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.
The following examples are pseudo-classes for CSS1 and CSS2. We will cover the pseudo-classes for CSS3 in another article.
|: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-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
|: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
Recommended Books & Training Resources