1. Home
  2. How-to Articles
  3. How to Use CSS Pseudo-Classes

How to Use CSS Pseudo-Classes

  • google plus

In Brief...

Most CSS styles are attached to element names (e.g., div), class or id attributes (e.g., .big, #wrapper), or position in the page structure (e.g., ul ul). Pseudo-classes are used to classify elements by other means. The syntax of pseudo-classes is element:class. Currently, the best supported pseudo-classes all apply to link states. The following six steps show you how to use CSS pseudo-classes in an existing HTML document.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

A link can have the following pseudo-classes:

  • a:hover
  • a:visited
  • a:active

Here's how you use these CSS pseudo-classes:

  1. Start with the following HTML document:
    <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Links</title>
</head>
<body>
<h1>CSS Links</h1>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a><br>
<a href="http://www.webucator.com">Webucator</a><br>
<a href="http://www.google.com">Google</a><br>

<h3 style="color: red; margin-bottom: 2px;">Important Note</h3>

<p>Order matters.  If <span style="font-family: monospace;">a:
active</span> precedes <span style="font-family: monospace;">a:
hover</span>, the effects in <span style="font-family: monospace;">a:
hover</span> will take precedence. So, in this example, you would not see the color
change when the user clicks down on a link.</p>

</body>
</html>
  2. Add the style tag under the title tag and add the a tag style information.
    <style type="text/css">
	a {
		color: #000066;
		text-decoration: none;
		cursor: pointer;
	}
  3. The a:hover class indicates the mouse pointer is over the link. Add this code to your style tag: 
    	a:hover {
		color: #ff6600;
		text-decoration: underline;
	}

    This code makes the link blaze orange when you hover over it, like so:
    A Hover

  4. The a:visited class indicates the link has been visited. Add this.
    	a:visited {
		color: #336699;
	}

    This code changes the color of the link to blue after it's been clicked.
    A Visited

  5. The a:active class indicates the link is active (e.g., the user has clicked it). Add this.
    	a:active {
		color: #ffcc99;
		cursor: wait;
	}

    This code turns the link to peach-orange, and the link stays that color until the user completes the click:
    A Active

  6. The full code for using these pseudo-classes looks like this:
    <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Links</title>
<style type="text/css">
	a {
		color: #000066;
		text-decoration: none;
		cursor: pointer;
	}
	
	a:visited {
		color: #336699;
	}
	
	a:hover {
		color: #ff6600;
		text-decoration: underline;
	}
	
	a:active {
		color: #ffcc99;
		cursor: wait;
	}
</style>
</head>
<body>
<h1>CSS Links</h1>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a><br>
<a href="http://www.webucator.com">Webucator</a><br>
<a href="http://www.google.com">Google</a><br>

<h3 style="color: red; margin-bottom: 2px;">Important Note</h3>

<p>Order matters.  If <span style="font-family: monospace;">a: active</span> 
precedes <span style="font-family: monospace;">a: hover</span>,
the effects in <span style="font-family: monospace;">a: hover</span> will 
take precedence. So, in this example, you would not see the color 
change when the user clicks down on a link.</p>

</body>
</html>

Need CSS Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss