Pseudo-Classes

You have already seen in previous lecture notes how to establish a class in CSS and connect it with an element: 

<style type="text/css">
   p.warning { color: red; }
</style>


<p class="warning">High Voltage</p>

Whenever you use a class, you as the author decide which paragraphs should have be warnings and which ones shouldn&#rsquo;t.

A pseudo-class, on the other hand, lets you attach a style to an element whose status is determined by the user. For example, you might want a visited link to have a different color than a link that hasn’t been visited. Since you have no control over whether a user has clicked a link or not, you can’t use a regular class.

Pseudo-Classes for links

Links have four states:

You can change the appearance of a link in all these situations with CSS like this. Notice that instead of using a period . as you would for a regular class, you use a colon : to indicate a pseudo-class. 

/* turn off underlining on all links */
a { text-decoration: none; }

a:link { color: #009900; }
a:visited { background-color: #ffffcc; }
a:hover { text-decoration: underline; }
a:active { font-style: italic; }

You may use any or all of these pseudo-classes on a link, but you must use them in the order shown, or they will not work properly.

Normally, unvisited links are blue and visited links are purple. In this example, I changed the color of unvisited links—as an example. In most cases, you should not change link colors without a compelling reason, because people are used to seeing blue and purple. If you are using a blue background, of course, you must change the colors, or your links will be totally unreadable! That qualifies as a compelling reason. :)

Other Pseudo-classes

There are other pseudo-classes that let you set an element’s style depending upon its position relative to other elements. These include :first-child, :first-line, and :first-letter, :before and :after , but they are beyond the scope of the discussion here.