Pseudoclasses

CSS pseudoclasses refer to an existing selector’s state, including:

• a hovered link or button
• a checked checkbox
• an invalid form input

You use them by combining your selector with a colon (:) and the appropriate pseudoclass:

a {
  color: red;
}
a:hover {
  color: fuchsia;
}

In the above example, the link text will be red until it is hovered, in which case it turns fuchsia.

In most cases where you have a :hover effect, you also want to add :focus – this uses your same hover styles for users navigating your site via the keyboard instead of the mouse/trackpad. So, the example above would be:

a:hover, a:focus {
  color: fuchsia;
}

Styling pseudoclasses

Any CSS can be updated within your pseudoclass selector, however you should consider whether your updated CSS will affect the layout of your page.

For example, adjusting the font size or adding borders will affect your layout.

The following demo shows some examples of this and the alternate CSS to avoid the issue.