Header Ads

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.

V
isited
           
             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.













              







No comments:

Powered by Blogger.