Post
Ask Question

Overview of Pseudo Classes in CSS

Introduction 

 
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 allows you to style Content Dynamically based on its position in the document or state.
 
Syntax
  1. selector: pseudo-class { property: value; }  
  2. selector: pseudo-element {property: value}  
  3. 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 produces 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 produces 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 produces 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 in 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.


Similar Articles