Submodule 4.2: Displaying Content - Media - Alerting Users

Tables

Pseudo- classes

Pseudo- classes in CSS are used to change the appearance of an element at different events.

Example of events:

  • When the user mouses over an element
  • When a link is not visited, visited, hover or active

The general syntax for pseudo-classes is the name of our selector and the pseudo class with a colon between them.

We have already used the pseudo-class 

tr:hover {background-color:#dbb08d !important}

in our table. The above would change the color of the row when the user mouses over the element.

 The most common usage of pseudo-classes is in the links.

Links have four different states.

  • a: link: unvisited link
  • a: hover: mouse over
  • a: active: selected link
  • a: visited: visited link

pseudo- classes

Note: In CSS the active state should always be written after the hover state. Hover state should be declared after link and visited states.

For more information: https://www.w3schools.com/css/css_pseudo_classes.asp

Exercise

  1. Open your editor, create a new file and save it as exersice04.2.01.html in the folder "advanced".
  2. Modify and save the file. The browser's output should be as shown in the following image:

pseudo- classes

Solution: