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>
            /* unvisited link */
            a:link {
            /* visited link */
            a:visited {
            /* mouse over link */
            a:hover {
            /* selected link */
            a:active {

        <ahref="http://www.yahoo.com">Yahoo!! Home Page</a>

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 {
  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.


Check Your Pseudo Class : Dynamic Events in CSS Knowledge