CSS pseudo classes can be added to an element’s CSS selector, in order to style it in certain way, to affect the state that it is in. Pseudo classes affect the state of an html element, and cause some action to be performed upon that element.
For example, “hover” is a pseudo class that is often used with links and buttons, to make some action happen when the user moves their mouse over them.
I can create a button using HTML5 code, like this:
<button type="button">Hover over me!</button>
then add a bit of code to the CSS as follows:
button:hover {
color: gray;
}
This will be the result in my browser:
In this example I altered the “button” element by adding the “hover” pseudo class to it. So now a new state of being has been created for it – the hover state.
CSS Tricks has an excellent, in-depth listing here, detailing what all of the different CSS pseudo classes are and what they do.
CSS pseudo elements and CSS pseudo classes are closely related, but act upon html elements in a slightly different way. To learn a little about how pseudo elements work, please check out this article.
Thank you for reading, and please share this article and/or leave a comment below!
