What are Pseudo-classes in CSS?
A Pseudo-class in CSS defines the special state of an element. It is a keyword that we use after the selector to apply the style based on the state of the element.
For example, the active pseudo-class can be used on an anchor tag (<a>) to add extra styling if the link is active
So, CSS Pseudo-class helps you apply styles based on the state of the content ( like active when a link is active), the mouse events (like hover when the user hovers over an element), and many more.
Syntax of a Pseudo-class
The CSS Pseudo classes follow the below syntax:
selector:pseudo-class {
property: value;
}
Commonly used CSS Pseudo-classes
:visited Pseudo-class
This pseudo-class is used to add styling when a link is already been visited by the user. In this below example we will see how the color and background of the link change when it is visited
:hover Pseudo-class
This pseudo-class is used to add special effects and design when the user hovers over an element i.e. when a user places a mouse pointer over the element. We generally use the :hover pseudo-class with buttons and links to highlight them on hover. In the below example we will see how a button changes its color and background on hover.
:focus Pseudo-class
This pseudo-class is used to select an element when it receives focus i.e. when a user clicks on it. The :focus pseudo-class is used with input fields in the forms, when the user clicks on the input field it gets focus.
In this example, we will see how the style of the input field change when the user clicks on it.
:disabled Pseudo-class
This pseudo-class describes the disabled state of the element, you can add any style to the disabled element for a better representation. In the below example we will define specific color and opacity to the disabled element.
:active Pseudo-class
This pseudo-class is used to add styling when a user clicks on the element i.e. when the element is in an active state. It is generally used in navbar links that highlight which particular menu option is currently active.
In the below example we will show how a paragraph changes its color in an active state.
:invalid Pseudo-class
This pseudo-class matches whether the content entered by the user is valid or not. We apply it to the input elements to add error state styling when the input is invalid.
In the below example we will see how the invalid class comes into action when a user enters a name instead of an email in the email type input field.
Important CSS Pseudo-classes
| Pseudo-classes | Description | Example |
|---|---|---|
| :valid | Matches every <input> element with valid content | input:valid |
| :hover | Matches element on mouse hover | button:hover |
| :focus | Matches <input> element when it is focused | input:focus |
| :invalid | Matches every <input> element with invalid content | input:invalid |
| :checked | Matches every checked <input> element | input:checked |
| :active | Matches the active state of a link | a:active |
| :visited | Matches the visited link | a:visited |
| :disabled | Matches every disabled <input> element | input:disabled |
| :enabled | Matches every enabled <input> element | input:enabled |
| :required | Matches every required <input> element | input:required |
Conclusion
In this blog, we got to know about the concept of CSS Pseudo-class and how it is implemented. However, we discussed only a few important pseudo-classes. To explore more about CSS Pseudo-classes follow the below-mentioned link of MDN Docs.
MDN Docs : https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
For more updates on such topics, please follow our LinkedIn page- Front-end Studio.
