The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.
It’s likely that you’re already familiar with some of the user interaction pseudo-classes, namely
Important: Key Points to Note
There are security issues the
:visited pseudo-class can pose, so browsers do not support all CSS properties on visited links. Without these limitations, malicious sites could apply a style to a visited link, such as a unique background image for each visited link, to check whether popular sites or banks have been visited by the user. This allows the attacker to glimpse the user’s browsing history without their permission. As a result, modern browsers limit the styles that can be applied with
The spec explicitly condones these changes, saying: UAs [User Agents] may, therefore, treat all links as unvisited links, or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently.
For better accessibility, add
:focus wherever you include
:hover as not all visitors will use a mouse to navigate your site.
:hover can apply to any element on the page not just links and form controls.
:active are relevant to links, form controls, content editable elements, and any element with a tabindex attribute.
While it’s likely you’ve been using these basic pseudo-classes for some time, there are many others available. Several of these pseudo-classes have been in the specification for years, but weren’t supported (or commonly known) until browsers started supporting the new HTML5 form attributes that made them more relevant.
The following pseudo-classes match elements based on attributes, user interaction, and form control state:
A user interface element that’s enabled, which is basically any form control that supports the
disabled attribute but doesn’t currently have it applied.
Conversely, a user interface element that is
disabled: any form control that supports the disabled attribute and currently has it applied.
For radio buttons or checkboxes that are selected or ticked.
This selector singles out the element that is the target of the currently active intrapage anchor. That sounds more complicated than it is: you already know that you can have links to anchors within a page by using the # character with the ID of the target. For example, you may have Skip to content link in your page that, when clicked, will jump to the element with an ID of content.
This changes the URL in the address bar to
:target selector now matches the element in the document that has content as its ID. It’s as if you had included, temporarily, the selector #content. We say temporarily because as soon as the user clicks on a different anchor,
:target will match the new target.
Applies to one or more UI elements that are the default among a set of similar elements. For example, the one radio button in a group of same-named radio buttons that was checked on page load will continue to match
after another radio button in the same-named group is selected. Similarly, checkboxes that are selected on page load will continue to match
:default after they are unchecked.
Applies to elements that are valid, based on the type, pattern, or other input attributes (as we discussed in Chapter 4).
Applies to empty required elements and elements failing to match the requirements defined by the type or pattern attributes.
Applies to elements with range limitations where the value is within those limitations. This applies, for example, to date/time, number, and range input types with min and max attributes. When the value is null, it is
The opposite of
:in-range: elements whose value is outside the limitations of their range. Missing values are not out of range, as they are empty.
Applies to form controls that have the
:required attribute set.
Applies to all form controls that do not have the
Applies to elements whose contents are unable to be altered by the user. This is most elements other than those with the
contenteditable attribute set and form fields.
Applies to elements whose contents are user-alterable, such as
contenteditable components and writable input fields.
Browser support for these attributes is complete in browsers that support the attributes in their form controls; in other words, browsers that support required and pattern also support the associated
IE8 and earlier lack support for :checked, :enabled, :disabled, and :target. The good news is that IE9 does support these selectors, but not the user-interface selectors. IE10 and IE11 support
:optional, but not
Alexis Goldstein first taught herself HTML while a high school student in the mid-1990s, and went on to get her degree in Computer Science from Columbia University. She runs her own software development and training company, aut faciam LLC. Before striking out on her own, Alexis spent seven years in Technology on Wall Street, where she worked in both the cash equity and equity derivative spaces at three major firms, and learned to love daily code reviews. She is a teacher and a co-organizer of Girl Develop It, and a very proud member of the NYC Resistor hackerspace in Brooklyn, NY.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns