A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
In simple world, when a user hover, click, focus on any element then you wanted to do something, at that case you use pseudo-class
<h1 id="heading-example">Example :</h1>
If you want to change the color of a button to green when the user hover on it, then you use " :hover " pseudo-class and the code look like this
<pre><code>.btn:hover{
 background: green;
}
</code></pre><h1 id="heading-some-mostly-use-pseudo-class-are">Some Mostly use pseudo-class are :</h1>
<ul>
<li>:hover
</li>
<li>:focus
</li>
<li>:checked
</li>
<li>:enabled and :disabled 
</li>
<li>:root
</li>
<li>:first-child, :last-child and :nth-child()
</li>
<li>:first-of-type, :last-of-type and :nth-of-type
</li>
</ul>

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

**In simple world**, when a user hover, click, focus on any element then you wanted to do something, at that case you use  pseudo-class

# Example :
If you want to change the color of a button to green when the user hover on it, then you use " :hover " pseudo-class and the code look like this


```
.btn:hover{
  background: green;
}

``` 

# Some Mostly  use pseudo-class are :


- :hover

- :focus

- :checked

- :enabled and :disabled 

- :root

- :first-child, :last-child and :nth-child()

- :first-of-type, :last-of-type and :nth-of-type








Rohan Malo's blog

Rohan Malo's blog

Pseudo-classes in CSS

Example :

Some Mostly use pseudo-class are :