Pseudoclasses

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).

How can we check :active, :hover state?

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...