Submodule 4.2: Displaying Content - Media - Alerting Users

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

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:

Solution: