CSS Pseudo Classes
Pseudo-classes are used to define special states of an element and apply styles based on those states. They are added to selectors to target elements in specific states.
For example, The ": hover" is used for adding special effects to an element when the user moves the cursor over the element.
A pseudo-class always starts with a colon (:) and the names of the pseudo-class are not case-sensitive.
Here are some commonly used pseudo-classes:
|
Pseudo-class |
Description |
|
:active |
used to add style to an active element. |
|
:hover |
adds special effects to an element when the user moves the mouse pointer over the element. |
|
:link |
adds style to the unvisited link. |
|
:visited |
adds style to a visited link. |
|
:lang |
used to define a language to use in a specified element. |
|
:focus |
selects the element which is focused by the user currently. |
|
:first-child |
adds special effects to an element, which is the first child of another element. |
|
:last-child |
adds special effects to an element, which is the last child of another element. |
|
:nth-child |
adds special effects to an element, which is the nth child of an element. |
|
:nth-last-child |
adds special effects to an element, which is the nth child of an element but it will calculate that nth child from last. |
:hover pseudo-class
This pseudo-class adds a special style to an element when the user moves the cursor over it. To make it more effective, it must be applied after the ": link" and ": visited" pseudo-classes.
:active pseudo-class
It applies when the elements are clicked or activated. It selects the activated element.
:visited pseudo-class
It selects the visited links and adds special styles to them.
:lang pseudo-class
It is helpful in documents that require multiple languages. It allows us to define special rules for different languages.
Input:-
Output:-
:focus pseudo-class
It selects the elements that are currently focused on by the user. It is generally used in input elements of the forms and triggers when the user clicks on its elements.
:first-child pseudo-class
This pseudo-class matches a particular element, which is the first child of another element, and adds a special effect to the corresponding element.
Input:-
Output:-
:last-child pseudo-class
This pseudo-class matches a particular element, which is the last child of another element, and adds a special effect to the corresponding element.
Input:-
Output:-
:nth-child pseudo-class
This pseudo-class matches a particular element, which is the nth child of another element and we can control the child number to which we want to change or style. This number starts with 1 and the maximum it can go to the count of elements it has.
Input:-
Output:-
:nth-last-child pseudo-class
This pseudo-class matches a particular element, which is the last nth child of another element and we can control the child number to which we want to change or style. This number starts with 1 and the maximum it can go to the count of elements it has.
Input:-
Output:-
