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.