Pseudo Classes

Consider a scenario where a Web site consists of multiple Web pages linked through
hyperlinks. Browse through various Web pages by randomly clicking the links within the
main page. At ties, it might happen that unknowingly the same Web page get open that
you have already visited. In such a case, you might feel the need for a mechanism that could
differentiate the already visited links from the remaining ones. In CSS, this is possible by
using pseudo classes.

Pseudo classes allow the users to apply different styles to the elements such as buttons,
hyperlinks, and so on.

Active

         Defines a different style to an element that is activated by the user.

Hover
            Defines a different style to an element when the mouse pointer is moved over it.

link

           Defines a different style to an uninvited hyperlink.

Visited

           

             Defines a different style to the visited hyperlink.

The syntax demonstrates how to declare a pseudo class.

Syntax:

selector_name:state_name {property: value} where,
selector_name: Is an element name.
state_name: Is one of the states of an element.
property: Is any CSS property such as color, border, and font.

:link

              Is used for selecting all uninvited links.

:visited

                Is used for selecting all visited links.

:active 

              

                Is used for selecting links on mouse over

:focus 

                Is used for selecting the input element which has focus

:first-letter

                 Is used for selecting  the first letter of every <p> element.

:first-line
                 Is used for selecting the first line of every <p> element.

:first-child

             

                Is used for selecting every <p> elements that is the first child of its parent.

:before 

            

                 Is used for inserting content before every <p> element.

:after

             

               Is used for inserting content after every <p> element.

:lang (language) 

                                 

                          Is used for selecting every <p> element with a lang attribute value.

Pseudo classes specify the styles to be applied on an element depending on its state.
In CSS3, a selector can contain multiple pseudo-classes. These pseudo-classes should not
be mutually exclusive. For example, the selectors a:visited:hover and a:link:hover
are applicable, but a:link:visited is not applicable because :link and :visited
are mutually exclusive selectors. The HTML code creates a form that accepts the customer
details and provides a link that allows the user to view the bill as shown in figure.

CSS code specifies the different styles for the visited links, unvisited links, and for the links
when the mouse hovers over it.

Explanation for the code shown in figure. 

a:link
{
color: white;
background-color: black;
border: 2px solid white;
}

Specifies the styles for an uninvited link.

a:visited
{
color: white;
background-color: brown;
border: 2px solid white;
}

Specifies the styles for a visited link.

a:hover
{
color: black;
background-color: white;
border: 2px solid black;
}

Specifies the styles for a link when a mouse hovers over it.

                                     An example output of mouse hovered link.