CSS pseudo classes are used to style the dynamic states of an element. It combined with a CSS selector to add an effect to existing elements based on their states.
For example, changing the style of an element when the user hovers over it, or when a link is visited. All these effects can be done using Pseudo Classes in CSS.
There are many Pseudo-classes in CSS but the ones which are most commonly used are as follows:
:hover Pseudo-class
The hover pseudo-class is used to add special effects to an element when our mouse pointer is over it.
The below example demonstrates that when your mouse enters the <div> area, its background color changes from cyan to yellow.
:active Pseudo-class
The active pseudo-class is used to select an element that is activated when the user clicks on it. The following example demonstrates that when you click on the <div>, its background color changes for a moment.
:focus Pseudo-class
The focus pseudo-class is used to select an element that is currently focussed by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it. In the following example, the background color of the input field which is currently focussed on changes.
:visited Pseudo-class
The visited pseudo-class is used to select the links which have been already visited by the user. In the following example, the color of the link changes once it is visited.
:first-child Pseudo-class
This pseudo-class matches an element that is the first child element of some other element. The selector p:first-child in the example below selects the first <p> of example and set the color is red.
:last-child Pseudo-class
This pseudo-class matches an element that is the last child element of some other element. The selector p:last-child in the example below selects the last <p> of example and set the color is red.
:nth-child Pseudo-class
The :nth-child pseudo-class allows you to target one or more specific children of a given parent element.
The syntax of this selector can be given with :nth-child(N), where N is an argument.
:lang Pseudo-class
This pseudo-class :lang allows constructing selectors based on the language setting for specific tags.
The :lang pseudo-class in the example below defines the quotation marks for <q> elements that are explicitly given a language value of no.