Pseudoclasses are used in CSS to describe elements, behavior after specific actions. Actions supported by pseudoclasses are as follows:
Mouse hover
Mouse click/touch
Input focus
Another use of pseudoclasses is matching elements in a specific container described by the order in this container:
First child, last child
Any child
Any child of type
The most important feature of pseudoclasses you can see on links (<a> elements with href attribute).
Hover state can be checked whenever you move your mouse pointer over the link. The easiest use of this property can be checked with the following code:
HTML:
<a href="#"> Title of link</a>
SASS:
a color: #000 background: #fff a:hover color: #fff background: #000
Generated CSS code:
a {
color: #000;
background: #fff;
}
a:hover {
color: #fff;
background: #000;
}With the preceding code, whenever you hover the mouse over the link, the color and background of the link will...