codescracker


css

CSS Pseudo-Classes



« Previous Tutorial Next Tutorial »


The pseudo-classes are used to add special effects to the selectors, such as changing the color of visited links. The selectors are the names given to different styles.

A pseudo-classes always starts with a colon (:).

The Pseudo-Class Syntax

The syntax to define a pseudo-class is as follows :

selector: pseudo-class {
property: value; }

Some common categories of pseudo-classes in CSS are given as follows :

You will learn about all these pseudo-classes in detail from Next Chapters.

Pseudo-classes and CSS Classes

You are free to use both Pseudo-Classes and CSS classes together. Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
    color: red;
} 
</style>
</head>
<body>

<p><a class="highlight" href="http://codescracker.com/html">HTML Tutorial</a></p>
<p><a href="http://codescracker.com/js">JavaScript Tutorial</a></p>

</body>
</html>

It will display the following result, place your mouse cursor over the both link to watch the effect:

Here, in the above example when you place your mouse's cursor over the link, then one will change the color (red color) (HTML Tutorial) while the other will change the color (default color) (JavaScript Tutorial)

All CSS Pseudo Classes

Following table lists all the CSS Pseudo Classes with example and description :

Selector Example Description
:active a:active This selects all the active link
:checked input:checked This selects each and every checked <input> element
:enabled input:enabled This selects each and every enabled <input> element
:disabled input:disabled This selects each and every disabled <input> element
:empty p:empty This selects each and every <p> element which has no children
:first-of-type p:first-of-type This selects each and every <p> element which is the first <p> element of its parent
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:last-child p:last-child This selects each and every <p> elements which is the last child of its parent
:focus input:focus This selects the <input> element which has focus
:hover a:hover This selects the links on mouse over
:lang(language) p:lang(it) This selects each and every <p> element with a lang attribute value starting with "it"
:last-of-type p:last-of-type This selects each and every <p> element which is the last <p> element of its parent
:invalid input:invalid This selects all the <input> elements with an invalid value
:in-range input:in-range This selects the <input> elements with a value in a specified range
:not(selector) :not(p) This selects each and every element which is not a <p> element
:link a:link This selects all the unvisited links
:nth-child(n) p:nth-child(2) This selects each and every <p> element which is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) This selects each and every <p> element which is the second child of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) This selects each and every <p> element which is the second <p> element of its parent
:nth-last-of-type(n) p:nth-last-of-type(2) This selects each and every <p> element which is the second <p> element of its parent, counting from the last child
:only-of-type p:only-of-type This selects each and every <p> element which is the only <p> element of its parent
:only-child p:only-child This selects each and every <p> element which is the only child of its parent
:optional input:optional This selects the <input> elements with no "required" attribute
:required input:required This selects the <input> elements with a "required" attribute specified
:read-write input:read-write This selects the <input> elements with no "readonly" attribute
:out-of-range input:out-of-range This selects the <input> elements with a value outside a specified range
:read-only input:read-only This selects the <input> elements with a "readonly" attribute specified
:valid input:valid This selects all the <input> elements with a valid value
:visited a:visited This selects all the visited links
:root root This selects the root element of the document
:target #news:target This selects the current active #news element (clicked on a URL containing that anchor name)

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test