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: 
 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 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: