CSS States

📣 Sponsor

As a user interacts with objects on a page, they will hover, click on, and focus on items, either with their mouse or via touch. CSS allows us to use these interactions to change styles, to give users feedback on what they can and cannot do.

For instance, if a user hovers over a link, they will know it is a link. If they hover over a paragraph, however, nothing should happen, since they cannot interact with that. These are most commonly used with anchors, i.e. links to other pages, but they are also used with inputs frequently too.

Even though they are used with these two sets of items most frequently, they can be used on any HTML element for the most part. The main state indicators are:

:hover - when a user hovers over an element
:active - when a user clicks on an item, before unclicking.
:focus - when a user is focused on something, i.e. typing in an input.
:target - when an item's ID matches the fragment in a URL (a URL fragment is # followed by text at the end of a URL.)
:link - a link which has not already been visited.
:visited - a link which has already been visited. By default shown as purple.

Using these state indicators, we can do pretty much anything we want with user interactions in CSS. We have a full list of all CSS selectors available here, if you are interested in other states.

Best Practices

Since CSS prioritises the last elements over earlier elements, it is often best practice to have states after the main element. i.e. imagine an anchor which has a hover state. We would write that like this:


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

When a user hovers over the above, the anchor will turn red.

Active

As mentioned, :active will style something just after it is clicked, but before the user unclicks. An example is shown below. This can be applied to divs as well as any other element:


div {
    color: white;
}
div:active {
    color: orange;
}

Try clicking on me

Focus

Focusing is often used with inputs, but can be used with any other 'tabbable' elements, i.e. elements which have a tabindex in HTML. An example is shown below with an input:


input {
    background: #101011;
    border: 2px solid #2b2e2f;
    border-radius: 10px;
    padding: 0.5rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1rem;
    max-width: 400px;
}
input:focus {
    border: 2px solid white;
    background: white;
    outline: none;
    color: black;
}

Outline

Note, when you click on an input or 'tabbable' element, in most browsers, you will see a glowing blue border around the element. This is different from a border, in fact it is known as the outline. If you want to remove this blue outline around inputs you are clicking or focusing on, you can use the following code:


input:focus {
    outline: none;
}

Last Updated 1617479793593