Pseudo-classes

Pseudo-classes are another way we can select things in CSS.

The reason they are have “pseudo” in the name is they don’t exist in the HTML, but instead are based on the state of an element.

There are a lot of them at our disposal, allowed us to check if form elements are valid or invalid, if modals are opened, and if media is playing, paused, or muted, among a long list of other things.

The syntax

Unlike a regular class, which starts with a period (.), to select a pseudo-classes start with a single colon (:).

• :playing
• :paused
• :open
• :valid
• etc.

We can technically use any of the valid psuedo-elements on any given element, but it doesn’t make much sense to do something like p:playing or a:paused.

Getting started with psuedo elements

The most common ones that you will use are :hover and :focus-visible, which we use usually use to indicate that an element is interactive.

a {
  color: orangered;
}

a:hover,
a:focus-visible {
  color: rebeccapurple;
}

:hover indicates a user is hovering over it with a pointing device, like a mouse, while :focus-visible is for if a user has selected an element using keyboard navigation.

Focus states are often forgotten/ignored (or worse yet, removed). It’s important that users who are using a keyboard know what they’ve selected!

Let’s change the links on hover

We have some links in our project, let’s add a hover and focus state to them!

What about :focus?

We used to only have :focus. The problem with focus is that interactive elements like buttons gain focus when we click on them. So, if you open a menu, the button you used to open it will get a focus ring on it. If we use :focus-visible, the browser decides on when to show a focus ring depending on the device the user is using to focuon on it, and the type of element it is. I’ve essentially replaced :focus with :focus-visible in my work.