Overview of Pseudo Classes in CSS

• :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