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;
}