CSS Pseudo Class

Pseudo Class in CSS :

  1. Pseudo-classes are used to represent dynamic events.
  2. Pseudo-classes can represent a change in state.
  3. Pseudo-classes have a single colon before the pseudo-class property.
  4. 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

  1. According to default styles applied by browser, An unvisited hyperlink is generally blue, whereas a visited hyperlink is purple.
  2. We can customize those settings by using these pseudo code.
a:link {
       color:#FF0000;
 }
  1. We can represent default color of unvisited link to red using above code snippet.
  2. 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]