CSS Pseudo Classes for beginners.
Published: 2020-11-06 15:43:47

In this article lets, discuss about CSS pseudo classes. 

In our two recent articles we discussed about,

- [Simple CSS Selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44).

- [CSS Pseudo Elements](https://dev.to/gautham495/css-pseudo-elements-for-beginners-53ob).

Before reading this one, read those ones, to understand this article better.

 The List of pseudo classes we are going to learn now.

- :active.
- :hover.
- :focus.

Mostly these three are used in links, in buttons and in input text fields respectively as it enhances the way the website looks and works improves User Experience(UX).


#### <u>:active</u>

When a link is clicked, we can change the CSS properties of the element at that moment with the help of :active selector.

```
.link{    

font-size: 30px;
font-weight: 600;
text-decoration: none;
color:black;

}

.link:active{

color:red;    

}
```

![recording (5)](https://dev-to-uploads.s3.amazonaws.com/i/dn2sfyixxubzv424qme0.gif)
 

#### <u>:focus</u>

When an element like input is focused/when it is clicked and we start typing we can change its CSS properties with :focus pseudo selector.


```

.input{
 
padding:16px;
border:1px solid #353839;
outline:none;

}
.input:focus{

border: 2px solid blue;

}
```
The above CSS code fulfills a wonderfull User Experience(UX) purpose while filling forms or dealing with multiple input fields.

It tells the user where the cursor is at by making the border blue.   

![recording (8)](https://dev-to-uploads.s3.amazonaws.com/i/agm4gecaxucqdz3oodcp.gif)
 

#### <u>:hover</u>
 

When we hover over an element, we can apply CSS properties with :hover pseudo element.

```
.button{    

transition: 1s;
padding:16px;
font-size: 20px;
font-weight: 600;
color:white;
border:none;
outline:none;

}

.button:hover{

transition: 1s;
cursor:pointer;
transform: translateY(-4px);
box-shadow: 0 0 7px red;
outline:none;

}
```

![recording (7)](https://dev-to-uploads.s3.amazonaws.com/i/q21l2llc59nf2skcwr8j.gif)

> Whenever using :hover pseudo selector, always use <code>transition:1s</code> because when you use <code>:hover</code> without transition property, they tend to apply the CSS properties instantly which makes the User Experience bad. 

> So always use transition, both in the element and in :hover selector, like the above given CSS code for better UX.

And thats it, we have learnt how to use pseudo class selectors to our advantage.

#### <u>My Personal Experience: </u>

There are a lot more CSS pseudo-class selectors. But I use these three more than 99% of the time. If I want to use others, I just look it up in the internet.


I would recommend to use the input:focus and button:hover pseudo selector all the time for better user experience and I use these two in all my websites.

User is king. So we have to inform the user what he is doing all the time and give him a good experience. And thats what I try to do with these pseudo class selectors.

### Thank you for reading!

If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.



### <u>My Other Articles: </u>



- [Universal CSS properties everyone must know](https://dev.to/gautham495/universal-css-properties-everyone-must-use-4kie)

- [Create-react-app](https://dev.to/gautham495/creating-a-new-react-app-with-create-react-app-4e9m)

- [Git for beginners](https://dev.to/gautham495/basic-git-knowledge-for-beginners-m4p)

- [Change headers in react with react-helmet](https://dev.to/gautham495/changing-headers-in-react-with-react-helmet-d0d)

- [Know How to apply box-shadow on all four sides.](https://dev.to/gautham495/know-how-to-apply-box-shadow-on-all-four-sides-43pn)
 
- [Simple CSS Selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44).

- [CSS Pseudo Elements](https://dev.to/gautham495/css-pseudo-elements-for-beginners-53ob).