codescracker


css

CSS Anchor Pseudo-Classes



« Previous Tutorial Next Tutorial »


In CSS, 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 enables 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>
	<title>CSS Anchor Pseudo Class Example</title>
	<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 anchor pseudo-class example code:

css anchor pseudo class example

Below is the live demo output of the above anchor pseudo class example code in CSS. 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, demonstrates how to use the CSS :focus pseudo-class :

<!DOCTYPE html>
<html>
<head>
	<title>CSS Focus Pseudo Class Example</title>
	<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>

Following is the sample output of the above focus pseudo class example code in CSS:

css focus pseudo class

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