Slide 5.21: CSS pseudo-class

CSS Pseudo-Class

CSS pseudo-class is used to add special effects to some selectors.

Syntax

The syntax of pseudo-class:

 selector:pseudo-class {
  property: value }

CSS classes can also be used with pseudo-class:

 selector.class:pseudo-class {
  property: value }

Anchor Pseudo-Class
Links can be displayed in different ways in a CSS-supporting browser:

 a:link    { color: #FF0000 }      /* unvisited link  */
 a:visited { color: #00FF00 }      /* visited link    */
 a:hover   { color: #FF00FF }      /* mouse over link */
 a:active  { color: #0000FF }      /* selected link   */

Note that

a:hover must come after a:link and a:visited in the CSS definition in order to be effective!!

a:active must come after a:hover in the CSS definition in order to be effective!!

Pseudo-class names are not case-sensitive.

Pseudo-Class and CSS Classes
Pseudo-class can be combined with CSS classes. If the link in the example below has been visited, it will be displayed in red.

 a.red:visited { color: #FF0000 }
 <a class="red" href="scores/index.html">Scores</a>

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> a:link {color:#FF0000;} /* unvisited link / a:visited {color:#00FF00;} / visited link / a:hover {color:#FF00FF;} / mouse over link / a:active {color:#0000FF;} / selected link */ </style> </head> <body bgcolor="#EDF3FE"> <p><b><a href="http://www.twinsbaseball.com/">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html>