How to Use CSS Pseudo-Classes
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.
A link can have the following pseudo-classes:
- a:hover
- a:visited
- a:active
Here's how you use these CSS pseudo-classes:
- 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>
- Add the
style
tag under thetitle
tag and add thea
tag style information.<style type="text/css"> a { color: #000066; text-decoration: none; cursor: pointer; }
- The
a:hover
class indicates the mouse pointer is over the link. Add this code to yourstyle
tag:a:hover { color: #ff6600; text-decoration: underline; }
This code makes the link blaze orange when you hover over it, like so:
- 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.
- 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:
- 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>