Pseudo Class : Dynamic Events in CSS

Pseudo Class in CSS :

Pseudo-classes are used to represent dynamic events.
Pseudo-classes can represent a change in state.
Pseudo-classes have a single colon before the pseudo-class property.
Pseudo-classes are used to add special effects to some selectors.

Dynamic Pseudo Classes in CSS :

Pseudo Class	What it Represents ?
:link	Unvisited hyperlinks
:visited	Visited hyperlinks
:hover	Element that Currently has the user's mouse pointer hovering over it
:focus	Element that currently has focus(if the user is using keyboard to navigate to a link)
:active	Element on which the user is currently clicking

Live Example :

<!DOCTYPE html>
<html>
    <head>
        <style>
            /* unvisited link */
            a:link {
                color:#FF0000;
            }
            /* visited link */
            a:visited {
                color:#00FF00;
            }
            /* mouse over link */
            a:hover {
                color:#FF00FF;
            }
            /* selected link */
            a:active {
                color:#0000FF;
            }
        </style>
    </head>
    <body>
        <ahref="http://www.yahoo.com">Yahoo!! Home Page</a>
    </body>
</html>

Explanation : Pseudo Code

According to default styles applied by browser, An unvisited hyperlink is generally blue, whereas a visited hyperlink is purple.
We can customize those settings by using these pseudo code.

a:link {
       color:#FF0000;
 }

We can represent default color of unvisited link to red using above code snippet.
Similarly we can mention different colors to the links when they are in different dynamic states.

[information]

Check Your Pseudo Class : Dynamic Events in CSS Knowledge

[/information]