what is the use of pseudoclass selectors?

Hello friends,Today we learn about an interesting topic pseudoclass selector .In CSS ,you can apply styles to links in each of these states using a special  kind of selector called a pseudoclass selector . Its an odd name ,but you can  think of it as though links in a certain state belong to the same class . However ,the class name is not in the markup its something the browser keeps track of. So its kinda like a class ,a pseudoclass.

                                           Anchor pseudoclasses :

There are four main pseudoclass that can be used as selector :

1. a:link  - Applies a style to unclicked ( unvisited ) links.
2. a:visited - Applied a style to links that have already been clicked .
3. a:hover- Applied a style when the mouse pointer is over the link.
4. a:active - Applied a style while the mouse button is pressed.

    Pseudoselectors are indicated by the colon (:) character.

The :link , :visited, and :active pseudoselector replace the old presentational link , vlink and alink attributes , respectively , that were once used to change link colors . But with CSS , you can change more than just color . Once you have selected the link state ,you can apply any of the properties we have covered so far .

Lets look at an example of each .In these example,I have written some style rules for links (a:link) and  visited links (a:visited) .I have used the text-decoration  property to turn off the underline  under both  link states . I have also change the color of links (blue by default) to maroon,and visited links will now be gray instead of the default purple .

  a:link{                   color:  maroon;                   text-decoration:  none;               }              a:visited   {                 color : gray;                      text-decoration: none;                    }

 The  :hover selector is an interesting one .It allow you to do cool rollover effect on        links that were once possible only with JavaScript. If you add this rule to the ones above , the links will get an underline and a background color when the mouse is hovered over them , giving the user feedback that the text is a link.

 a:hover { 
                  color: maroon ;                  text-decoration: underline;                    background-color: #C4CEF8;                      } 

             The :active selector makes link bright red (consistent with maroon ,but more intense ) while the link is being clicked. This style will be displayed only for an instant , but it can give a subtle indication that something has happened.

   a:active{
                           color: red; 
                           text-decoration: underline;
                     background-color: #C4CEF8;
                        }.