CSS pseudo-class
The CSS pseudo-classes are the CSS special characters with the preceding colon which is used to add the special effects to an element. The CSS pseudo-classes are used with the CSS selectors to provide a special effect to any existing HTML element.
Syntax
selector: pseudo-class {
property: value;
}
Examples
- The :hover is used to change the color of any element or button when you move the cursor over it.
- The :visited pseudo-class displays the visited links by changing the color of the link from blue to purple.
Pseudo Classes
The CSS offers several pseudo-class, out of which the most used classes along with their explanation and implementation are given below:
CSS :hover Pseudo-class
The :hover class is used when we want give some effect to any button or element. Basically, this class changes the color of the element or button when we move the cursor over it.
Syntax
HTML element/selector :hover {
/*CSS property*/
}
Example
In the given example, we have created a block using the <div> element and also set out the :hover property to the <div> element. The background color of the block is set out to red and when we move the cursor over the block the color turns into yellow.
<!DOCTYPE html>
<html>
<head>
<title>CSS pseudo-class</title>
<style>
div {
background-color: #fc1c03;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: #fcba03;
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
Output
CSS :active pseudo-class
The :active pseudo-class is set out to make any element or link-activated when the user clicks on it.
Syntax
HTML element/selector :active {
/* CSS Property*/
}
Example
In the given example, we have created a button using the <button> element and sets the height width and margin property of the button. Then, we set the button: active property that allows the button to change color when someone click on it.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo-class</title>
<style>
button{
background-color: red;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
border: none;
}
button:active{
background-color: yellow;
border: none;
}
</style>
</head>
<body>
<button>Click Me!</button>
</body>
</html>
Output
CSS :visited Pseudo class
The :visited pseudo-class is used to highlight the links that are already visited by the user. By default, this class turns the color of the link from blue to purple when the user clicks on the link.
Syntax
HTML element/selector:visited {
/* CSS Property*/
}
Example
In the given example, a link is created by using the <a> tag. Then, the CSS property a:visited is set so that whenever we click on the link, the color of the link changes.
Other CSS pseudo-classes
S. no.
|
Pseudo-class
|
Description
|
| 1. |
:checked |
This pseudo-class is used when we want to set some CSS property to the checked attribute of <input> element. This class selects all the checked attribute elements and applies the properties to all of them. |
| 2. |
:disabled |
This pseudo-class disabled all the <input type=" text"> field and also provides the light grey background-color to them. |
| 3. |
:empty |
This pseudo-class is used to set styling to for all the <p> elements with no children. |
| 4. |
:enabled |
This pseudo-class is used when we want to enable all the <input type=" text"> fields. |
| 5. |
:first-child |
This pseudo-class is used to style the element that is the first child of any HTML element. |
| 6. |
:focus |
This pseudo-class is used to get focused on any element whenever the user clicks on it. |
| 7. |
:in-range |
This pseudo-class is used to set the CSS property to all the elements that have value within the particular range. |
| 8. |
:invalid |
This pseudo-class is used to set the styling properties for the form element that are not validated according to the element's setting. |
| 9. |
:lang |
This pseudo-class is used to set styling to all the elements with a lang attribute. |
| 10. |
:last-child |
This pseudo-class is used to set the CSS properties to all last child of the HTML element. |
| 11. |
:link |
This pseudo-class is used to style all the unvisited links within a webpage. The user can not style the already visited links. |
| 12. |
:not |
This pseudo-class set out the styling to those elements that are not specified in : not selector. |
| 13. |
:nth-child(n) |
This pseudo-class is used to provide styling to the nth-child of any HTML element irrespective of its type and parent element. |
| 14. |
:nth-of-type(n) |
This pseudo-class is used to set the CSS properties to the nth-child of a particular type of HTML element, counting from the last nth element.
n = number, keyword, or formula.
|
| 15. |
only-of-type |
This pseudo-class is used when we want to set the CSS styling properties to the element that are the only child of its type or its parent. |
| 16. |
:nth-last-of-type(n) |
This pseudo-class is used to set the CSS properties to the nth-child of a particular type of HTML element, counting from the last child. |
| 17. |
:only-child |
This pseudo-class selects and sets the CSS properties to all the elements that are the only child of its parent. |
| 18. |
:optional |
This pseudo-class is used to set the styling to the form elements that have no attribute. |
| 19. |
:out-of-range |
This pseudo-class is used to set the CSS properties to the <input> elements that have min or max attributes. |
| 20. |
:read-only |
This pseudo-class is used to set the CSS properties to only those <input> element that has read-only attribute. |
| 21. |
:read-write |
This pseudo-class is used to set the CSS properties to the <input> element that is both readable or writeable has no read-only and disabled attribute. |
| 22. |
:required |
This pseudo-class is used to set the CSS properties to the <form> elements that consist of the required attributes. This can be applied only on the input, select, and textarea. |
| 23. |
:root |
This pseudo-class is used to set the CSS property for the root element of the web page which is by default the <HTML> element. |
| 24. |
:target |
This pseudo-class is used to set the CSS properties for all the active target links. This is basically used for the href attribute of <a> element that contains a value with preceding #. |
| 25. |
:valid |
This pseudo-class is used for the form elements such as input elements with email filed, text area, min or max value, etc. So this class is basically used to indicate an error when the user enters the incorrect value by changing its styling properties. |
| 26. |
:visited |
This pseudo-class is used to select the visited link. |
| 27. |
:active |
This pseudo-class is used to set the styling for the active links. |
| 28. |
:first-of-type |
This pseudo-class is used to style the CSS element which is the first child of the <HTML> element. |
| 29. |
:hover |
This pseudo-class is used when we want any element, button or link to change color when we move the cursor over it. |
| 30. |
:last-of-type |
This pseudo-class is used to style every last child of a particular type of its parent. |
