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

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

11 Comments

Join the conversation! Your thoughts help the community grow.

Prasanna Murali10y ago
Nice one....
Yashwanth Muthineni11y ago
Nice Share
Afzaal Ahmad Zeeshan11y ago
I thought they were called "Pseudo-selectors".
Santhakumar Munuswamy11y ago
Good one
Chervine Bhiwoo11y ago
Good work!
Manas Mohapatra11y ago
Good Share..
Sibeesh Venu11y ago
Nice Share
Gopi Chand11y ago
Good effort
Nilesh Jadav11y ago
Nice one sir
Rajeesh Menoth11y ago
Nice One
Karthikeyan K11y ago
Thanks for sharing sir