Pseudo-classes

Pseudo classes

Pseudo classes are used to apply styles to an element in a certain state.

Pseudo classes Explanation
link applies style to an unvisited link (links only)
visited applies style to an visited link (links only)
hover applies style to an element when the mouse is placed over it
active applies style to an activated element
focus applies style to an element while it has the focus
lang applies style to an element that include the specified language

The focus and lang pseudo classes are not supported in MSIE.

Syntax

There is a colon between the selector and the pseudo class.

Selector:Pseudo-class { Property: Value }

For example :
a:link { color: red }

Pseudo classes can also be used with normal classes.

Selector.Normal-class:Pseudo-class { Property: Value }

For example :
a.example:link { color: red }

Anchor pseudo classes

When you use the following pseudo classes for the A element, the style can be applied according to the state of the link.

a:link { color: #0000ff; } /* Non-visited link color (The first sets) */
a:visited { color: #0000a0; } /* Visited link color (The second sets) */
a:hover { color: #ff0000; } /* Hover link color (The third sets) */
a:active { color: #ffff00; } /* Active link color (The fourth sets) */

These styles are applied to all links in the document.

<html>
<head>
<title>TAG index</title>

<style type="text/css">

a:link { color: #0000ff; }
a:visited { color: #0000a0; }
a:hover { color: #ff0000; }
a:active { color: #ffff00; }

</style>

</head>
<body>

<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../index.html">CSS Properties</a></li>
<li><a href="index.html">Relation Document</a></li>
</ul>

</body>
</html>
Example page

Pseudo classes and Normal classes

The style can be applied only to the links with the specified class by using the normal class.

a.example:link { color: #0000ff; }
a.example:visited { color: #0000a0; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ffff00; }

In the above example, the styles are applied only to the links that have the class "example".

<html>
<head>
<title>TAG index</title>

<style type="text/css">

a.example:link { color: #0000ff; }
a.example:visited { color: #0000a0; }
a.example:hover { color: #ff0000; }
a.example:active { color: #ffff00; }

</style>

</head>
<body>

<ul>
<li><a href="../../index.html" class="example">The styles are applied to this link.</a></li>
<li><a href="../index.html" class="example">The styles are applied to this link.</a></li>
<li><a href="index.html">The styles are not applied to this link.</a></li>
</ul>

</body>
</html>
Example page

Nesting

The style can be applied only to the links within a certain element by using descendant selectors.

Type selectors and Pseudo classes :

ul a:link { color: #0000ff; }
ul a:visited { color: #0000a0; }
ul a:hover { color: #ff0000; }
ul a:active { color: #ffff00; }

In this example, the styles are applied only to the links within the UL element.

Class selectors and Pseudo classes :

.example a:link { color: #0000ff; }
.example a:visited { color: #0000a0; }
.example a:hover { color: #ff0000; }
.example a:active { color: #ffff00; }

In this example, the styles are applied only to the links within the element with the class "example".

ID selectors and Pseudo classes :

#example a:link { color: #0000ff; }
#example a:visited { color: #0000a0; }
#example a:hover { color: #ff0000; }
#example a:active { color: #ffff00; }

In this example, the styles are applied only to the links within the element with the ID "example".

<html>
<head>
<title>TAG index</title>

<style type="text/css">

.example a:link { color: #0000ff; }
.example a:visited { color: #0000a0; }
.example a:hover { color: #ff0000; }
.example a:active { color: #ffff00; }

</style>

</head>
<body>

<ul class="example">
<li><a href="../../index.html">The styles are applied to this link.</a></li>
<li><a href="../index.html">The styles are applied to this link.</a></li>
<li><a href="index.html">The styles are applied to this link.</a></li>
</ul>

<ul>
<li><a href="../../index.html">The styles are not applied to this link.</a></li>
<li><a href="../index.html">The styles are not applied to this link.</a></li>
<li><a href="index.html">The styles are not applied to this link.</a></li>
</ul>

</body>
</html>
Example page

The focus pseudo class

The focus pseudo class apply style to an element while it has the focus.

input:focus { background-color: #f2f2f2; }

In the above example, the style is applied to the INPUT element while it has the focus.

<html>
<head>
<title>TAG index</title>

<style type="text/css">

input { width: 200px; }
input:focus { background-color: #f2f2f2; }

</style>

</head>
<body>

<form method="POST" action="sample.cgi">

<p><input type="text" name="name"></p>
<p><input type="text" name="address"></p>
<p><input type="text" name="email"></p>

</form>

</body>
</html>
Example page

The lang pseudo class

The lang pseudo class apply style to an element that include the specified language.

p:lang(en) { color: red; }

en = Language code

In the above example, the style is applied to the P element that include the specified language (en).

<html>
<head>
<title>TAG index</title>

<style type="text/css">

p:lang(fr) { color: #4040FF; }

</style>

</head>
<body>

<p lang="fr">Bonjour</p>
<p lang="en">Hello</p>

<div lang="fr">
<h3>French</h3>
<p>Bonjour</p>
</div>

</body>
</html>
Example page