CSS Pseudo Classes

CSS Pseudo Classes

CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects.

A pseudo-class starts with a colon (:). Its syntax can be given with:

selector:pseudo-class { property: value; }

The most commonly used pseudo-classes are as follows:

Value Description
:link Use this class to add special style to an unvisited link.
:visited Use this class to add special style to a visited link.
:hover Use this class to add special style to an element when you mouse over it.
:active Use this class to add special style to an active element.
:focus Use this class to add special style to an element while the element has focus.
:first-child Use this class to add special style to an element that is the first child of some other element.
:lang Use this class to specify a language to use in a specified element.

While defining pseudo-classes in a <style>...</style> block, following points should be noted:

Anchor Pseudo-classes

Using anchor pseudo-classes links can be displayed in different ways:

Example

    <!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
}
/* visited link */
a:visited {
    color: green;
}
/* mouse over link */
a:hover {
    color: pink;
}
/* selected link */
a:active {
    color: blue;
}
/* focus link */
a:focus {
    color: wheat;
}
</style>
</head>
<body>
<p><b><a href="#">This is a link</a></b></p>
</body>
</html>
Try it with the Editor

The :first-child pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element.

Example

    <!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
    color: blue;
} 
p:first-child i {
    color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p>I am a <i></i>person. I am a <i></i>person.</p>
<p>I am a <i></i>person. I am a <i></i>person.</p>
</body>
</html>
Try it with the Editor

The :lang pseudo-class

The language pseudo-class :lang, allows constructing selectors based on the language setting for specific tags.

This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').

Example

    <!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>Some text </p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
</body>
</html>
Try it with the Editor

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes.The link with class="red", in the example below will be displayed in red.

Example

    <!DOCTYPE html>
<html>
<head>
<style>
a.red:link {
		color: #ff0000;
	}
</style>
</head>
<body>
 <p>
     <a href="#">>Click me</a>
     <br>
     <a href="#" class="red">Click me</a>
 </p>
</body>
</html>
Try it with the Editor