In CSS, pseudo-class is a keyword incorporated into a selector for specifying a particular state of your chosen HTML element(s). Pseudo-classes not only allows designers to apply a style to their element relative to the content in the document, but also for peripheral factors such as the history of the navigator (using :visited), the status of any web content (such as :checked which worked on certain HTML form elements), or action as per positioning of the mouse (using :hover).
Here are some common uses of CSS pseudo-classes:
- When a user moves the mouse over a specific HTML element, then apply the style to that particular element.
- To apply a different style for user-visited and user-unvisited HTML anchors.
- For applying a style to a user-focused element.
- Selects the first letter or the first line of text in the HTML element.
The basic syntax of using pseudo-class is:
Syntax:
selector : pseudo-class{
property : value;
}Some of the Popular Pseudo-Classes:
Here are some commonly used "pseudo-classes" listed below:
| Pseudo-class | Description |
|---|---|
| :hover | It is implemented for adding a particular effect to any HTML element as you move the mouse pointer over it. |
| :active | It is implemented for choosing an HTML element that is activated as soon as the user clicks it. |
| :focus | It is implemented for selecting an element that is currently focused on by its user. |
| :visited | It is implemented for selecting the links that have been previously visited by the user. |
There are about 60 different types of standard "pseudo-classes" available in CSS, which we will study in further chapters.
