Did you find this useful?
Socialize it today.


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"

Please help us spread the word by socializing it today!

email contact us

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

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