Overview of Pseudo Classes in CSS

A CSS pseudo-class adds selectors that specify a special state of the element to be selected and used to add special effects to some selectors. A pseudo-class allow you to style Content Dynamically based on its position in the document or state.

Syntax:

selector: pseudo-class { property: value; }
selector: pseudo-element {property: value}
selector. class: pseudo-element {property: value}

The most-commonly used pseudo-classes are:

  • :link pseudo-class: The given example shows how to use the :link class to set the link color. Possible values could be any color name in the valid format.

    Example
    1. <html>  
    2.     <head>  
    3.         <style type="text/css">  
    4. a: link {color: red}  
    5. </style>  
    6.     </head>  
    7.     <body>  
    8.         <a href="">Pseudo class with link property</a>  
    9.     </body>  
    10. </html>  
    Output: The preceding code produces the following Red link.

  • :visited pseudo-class: The given example shows how to use the :visited class to set the link color. Possible values could be any color name in the valid format.

    Example
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5. a: visited {color: red}  
    6. </style>  
    7.     </head>  
    8.     <body>  
    9.         <a href="#" class="a1">Click this link</a>  
    10.     </body>  
    11. </html>   
    Output: The preceding code produce the following link. When you click this link it will change its color to Red.


  • :hover pseudo-class: The given example shows how to use the :hover class to change the color of links from Blue to Green when we hover a mouse pointer over that link.

    Example
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5. a: hover {color: green}  
    6. </style>  
    7.     </head>  
    8.     <body>  
    9.         <a href="#" class="a1">Bring mouse on me</a>  
    10.     </body>  
    11. </html>  

    Output:
    The preceding code produce the following link, when you click this link it will change its color to Green.



  • :active pseudo-class: The given example shows how to use the :hover class to change the color of links from Blue to Green when we hover the mouse pointer over that link.

    Example
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5. a: active {color: green}  
    6. </style>  
    7.     </head>  
    8.     <body>  
    9.         <a href="#" class="a1">Please activate me</a>  
    10.     </body>  
    11. </html>   
    Output: The preceding code produces the following link. When you click this link it will change its color to Green only for the activation of link:

The most commonly used pseudo-elements are:

  • :first-line pseudo-element: The following example shows how to use the :first-line element to add special effects to the first line of elements.

    Example
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5. p: first-line { text-decoration: underline; color: blue }   
    6. </style>  
    7.     </head>  
    8.     <body>  
    9.         <p class="p1">welcome to my program , hi guys my name is mohit and this is example shows how to select first line of a paragraph.  
    10. You can apply this property of peasudo class only on the first line. This line remains same because this is in the second line of the paragraph.</p>  
    11.     </body>  
    12. </html>  
    Output: The preceding code produce the following change only on the first line.


  • :first-letter pseudo-element: The following example shows how to use the :first-letter element to add special effects to the first letter of the line.

    Example
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">  
    5. p: first-letter { text-decoration: underline; color: red }   
    6. </style>  
    7.     </head>  
    8.     <body>  
    9.         <p >Welcome to my program , hi guys my name is mohit and this is example shows how to select first line of a paragraph.  
    10. You can apply this property of Pseudo class only on the first line. This line remains same because this is in the second line of the paragraph.</p>  
    11.     </body>  
    12. </html>  
    Output: The preceding code produces the following change only on the first letter.


    The most commonly used pseudo-elements with a pseudo-class are as follows.
  • :first-letter pseudo-element with pseudo class: The following example shows how to use the :first-letter pseudo-element to add special effects to the first letter with selected elements of the line.

    Example
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <style type="text/css">   
    5. p.p1:first-letter { font-size: 30px; color: blue }  
    6. </style>  
    7.     </head>  
    8.     <body>  
    9.         <p class="p1">Welcome to my program , hi guys my name is mohit and this is example shows how to select first line of a paragraph.  
    10. You can apply this property of peasudo class only on the first line. This line remains same because this is in the second line of the paragraph.</p>  
    11.     </body>  
    12. </html>  
    Output: The preceding code produces the following change only on the first letter with id selector.


Conclusion

I hope this article provides you a better understanding of pseudo-class and pseudo-elements.