Overview of Pseudo Classes in CSS

Mohit Kumar
Aug 18, 2015
5.6k
0
0
Article

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.