CSS Pseudo-class and Pseudo-element

Friday, March 30, 2012

tags CSS

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-classExampleDescription
:linka:linkSelects all unvisited links
:visiteda:visitedSelects all visited links
:activea:activeSelects the active link
:hovera:hoverSelects links on mouse over
:focusinput:focusSelects 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-elementExampleDescription
:first-letterp:first-letterSelects the first letter of every paragraph element
:first-linep:first-lineSelects the first line of every paragraph element
:first-childp:first-childSelects every paragraph elements that is the first child of its parent
:beforep:beforeInsert content before every paragraph element
:afterp:afterInsert 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

CSS: The Missing Manual HTML CSS and JavaScript Editor HTML CSS: The Complete Reference