In this article lets, discuss about CSS pseudo classes.
In our two recent articles we discussed about,
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).
:active
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;
}
:focus
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.
:hover
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;
}
Whenever using :hover pseudo selector, always use
transition:1sbecause when you use:hoverwithout 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.
My Personal Experience:
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.
Top comments (0)