<h3 id="heading-what-is-a-pseudo-class">What is a Pseudo-class ?</h3>
<blockquote>
A pseudo-class is a keyword that we add to the selector that specifies <code>state</code> of the selected element(s).
</blockquote>
For example :
<ul>
<li>When the user hovers over the element - <code>:hover</code> can be used </li>
<li>When the input field is under focus - <code>:focus</code> can be used</li>
<li>When we want to target the first-child or last-child of any element - <code>:first-child</code> <code>:last-child</code></li>
</ul>
<h3 id="heading-syntax">Syntax :</h3>
<pre><code class="lang-css">selector:pseudo-class {
 /* Write your styles here */
}
</code></pre>
<ul>
<li>selector == any HTML element <code>&lt;li&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;p&gt;</code> etc.</li>
<li>pseudo-class == <code>:hover</code>, <code>:focus</code>, <code>:first-child</code>, <code>:last-child</code> etc.</li>
</ul>
<h3 id="heading-example">Example :</h3>
CSS snippet :
<pre><code class="lang-css">li:hover {
 background-color: orange;
 padding: 5px;
 border: 2px solid #000000;
}
</code></pre>
HTML snippet :
<pre><code class="lang-html">...
&lt;body&gt;
&lt;ul&gt;
 &lt;li&gt;item1&lt;/li&gt;
 &lt;li&gt;item2&lt;/li&gt;
 &lt;li&gt;item3&lt;/li&gt;
 &lt;li&gt;item4&lt;/li&gt;
 &lt;li&gt;item5&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
...
</code></pre>
In the above example, all the <code>&lt;li&gt;</code> elements will have an hover effect when the user hovers over them.
There are lot of <code>pseudo-classes</code> that we can make use in our projects :
<ul>
<li><code>:active</code></li>
<li><code>:any-link</code></li>
<li><code>:enabled</code></li>
<li><code>:fullscreen</code></li>
<li><code>:link</code></li>
<li><code>:nth-child()</code></li>
<li>and many more...</li>
</ul>
<hr />
That's it for this blog. I hope you have learnt something from it.
Happy coding. Thank you !

### What is a Pseudo-class ?
>A pseudo-class is a keyword that we add to the selector that specifies `state` of the selected element(s).

For example :
- When the user hovers over the element - `:hover` can be used 
- When the input field is under focus - `:focus` can be used
- When we want to target the first-child or last-child of any element - `:first-child` `:last-child`

### Syntax :

```css
selector:pseudo-class {
 /* Write your styles here */
}
```
- selector == any HTML element `<li>`, `<a>`, `` etc.
- pseudo-class == `:hover`, `:focus`, `:first-child`, `:last-child` etc.

### Example : 

CSS snippet :

```css
li:hover {
 background-color: orange;
 padding: 5px;
 border: 2px solid #000000;
}
```

HTML snippet :

```html
...
<body>
<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 <li>item5</li>
</ul>
</body>
...
```

In the above example, all the `<li>` elements will have an hover effect when the user hovers over them.

There are lot of `pseudo-classes` that we can make use in our projects :
- `:active`
- `:any-link`
- `:enabled`
- `:fullscreen`
- `:link`
- `:nth-child()`
- and many more...

_______________________________________________________________________________________________

That's it for this blog. I hope you have learnt something from it.

Happy coding. Thank you !

Prasad Kawalekar

Prasad Kawalekar

Pseudo-classes :short-explanation

A short and simple explanation of pseudo-classes.

What is a Pseudo-class ?

Syntax :

Example :