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.
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.
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.
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.
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.
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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok