Slide 5.21: CSS pseudo-class

Slide 5.20: CSS grouping and nesting selectors
Slide 5.22: CSS pseudo-class (cont.)
Home

CSS Pseudo-Class

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

Syntax

The syntax of pseudo-class:

`1`	`selector:pseudo-class {`

`2`	`property: value }`

CSS classes can also be used with pseudo-class:

`1`	`selector.class:pseudo-class {`

`2`	`property: value }`

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

1a:link    { color: #FF0000 }      /* unvisited link  */
2a:visited { color: #00FF00 }      /* visited link    */
3a:hover   { color: #FF00FF }      /* mouse over link */
4a: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.

`1`	`a.red:visited {` `color:` `#FF0000` `}`

`2`	`<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>

Slide 5.20: CSS grouping and nesting selectors
Slide 5.22: CSS pseudo-class (cont.)
Home