codescracker


css

CSS Anchor Pseudo-Classes



« Previous Tutorial Next Tutorial »


Anchor pseudo-classes provide various types of special effects to the A element of HTML.

The anchor pseudo-classes represent the state of links as unvisited, visited, or currently selected.

Anchor pseudo-classes also enable you to activate the HTML elements or apply a specified style to an element when the mouse pointer is kept over it.

The anchor pseudo-classes include the following :

All Anchor Pseudo-Classes Available in CSS

The following table describes the anchor/dynamic pseudo-classes available in CSS :

Pseudo-Class Description
:link Applies styles to non visited links
:visited Applies styles to visited links
:hover Applies styles to an element over which the mouse-pointer moves
:active Applies styles to an active element
:focus Applies styles to an element during the period it has user focus

CSS Anchor Pseudo-Classes Example

Some examples of using the anchor/dynamic pseudo-classes are given as follows :

a:link		/* unvisited links */
a:visited	/* visited links */
a:hover		/* user hovers */
a:active	/* active links */

Here is an example, demonstrates CSS anchor pseudo-classes:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: blue;
}
a:visited {
    color: red;
}
a:hover {
    color: silver;
}
a:active {
    color: cyan;
}
</style>
</head>
<body>

<p><b><a href="http://codescracker.com">This is a link</a></b></p>

</body>
</html>

Here is the sample output of the above CSS example. To watch the effect, place your mouse cursor over the link This is a link:

CSS :focus pseudo-class

Let's look at the following example which demonstrates how to use the CSS :focus pseudo-class :

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
    background-color: green;
	color:white;
}
</style>
</head>
<body>

<form action="#" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Here is the live demo output of the above CSS example. Now, start entering your name to watch the effect:

First name:
Last name:

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test