CSS Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

CSS classes can also use pseudo-classes:

Anchor Pseudo-classes

In browsers that support CSS, different states of links can be displayed in different ways.

Example

a:link {color:#FF0000;} /* Unvisited links */
a:visited {color:#00FF00;} /* Visited links */
a:hover {color:#FF00FF;} /* Mouse over links */
a:active {color:#0000FF;} /* Selected links */

Note: In CSS definitions, a:hover must come after a:link and a:visited to be effective.

Note: In CSS definitions, a:active must come after a:hover to be effective.

Note: Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be used in conjunction with CSS classes:

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS Syntax</a>

If the link in the above example has been visited, it will appear red.

CSS :first-child Pseudo-class

You can use the :first-child pseudo-class to select the first child element of a parent element.

Note: In versions prior to IE8, you must declare <!DOCTYPE> for :first-child to work.

Matching the First <p> Element

In the following example, the selector matches any <p> element that is the first child of any element:

Example

p:first-child
{
    color:blue;
}

Matching All <i> Elements in the First <p> Element

In the following example, the selector matches all <i> elements in <p> elements that are the first child of any element:

Example

p > i:first-child
{
    color:blue;
}

Matching All <i> Elements in <p> Elements That Are the First Child

In the following example, the selector matches all <i> elements in <p> elements that are the first child of any element:

Example

p:first-child i
{
    color:blue;
}

CSS - :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

Note: IE8 must declare <!DOCTYPE> to support the :lang pseudo-class.

In the following example, the :lang class defines the type of quotation marks for q elements with the attribute value "no":

Example

q:lang(no) {quotes: "~" "~";}

More Examples

Add Different Styles to Hyperlinks

Using :focus

All CSS Pseudo-classes/Elements