Pseudo-classes – The Basics

The following is adapted from HTML5 & CSS3 for the Real World, created by Alexis Goldstein, Louis Lazaris, and Estelle Weyl.

Pseudo-classes

It’s likely that you’re already familiar with some of the user interaction pseudo-classes, namely :link, :visited, :hover, :active
, and :focus.

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 :visited. 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. :focus and :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: :enabled
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. :disabled Conversely, a user interface element that is disabled: any form control that supports the disabled attribute and currently has it applied. :checked For radio buttons or checkboxes that are selected or ticked. :indeterminate
For form elements that are neither checked nor unchecked. For example, if you tick a check all checkbox to select a group of checkboxes, then deselect some but not all of the checkboxes in the group, the check all could be set to the indeterminate state (with JavaScript) to indicate that it’s neither checked nor unchecked. :target 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 thispage.html#contentand the :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. :default 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 :default 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. :valid
Applies to elements that are valid, based on the type, pattern, or other input attributes (as we discussed in Chapter 4). :invalid Applies to empty required elements and elements failing to match the requirements defined by the type or pattern attributes. :in-range 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 :in-range. :out-of-range 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. :required Applies to form controls that have the :required attribute set. :optional Applies to all form controls that do not have the :required attribute. :read-only
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. :read-write 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 :valid and :invalid
pseudo-classes. 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 :indeterminate, :required, and :optional, but not :default, :in-range
, :out-of-range, :read-only, or :read-write. While support is still lacking, JavaScript libraries such as Selectivizr can help in targeting these pseudo-classes in Internet Explorer.

Frequently Asked Questions (FAQs) about CSS Pseudo-Classes

What are the different types of CSS Pseudo-Classes?

CSS Pseudo-Classes are used to define the special state of an element. There are several types of Pseudo-Classes, including:


1. Structural Pseudo-Classes: These include :first-child, :last-child, :nth-child(), :nth-last-child(), :only-child, and more. They are used to select elements based on their position in the document tree.

2. User Action Pseudo-Classes: These include :hover, :active, :focus, and :visited. They are used to style elements based on user interaction.

3. Input Pseudo-Classes: These include :enabled, :disabled, :checked, and :indeterminate. They are used to style form elements based on their state.

4. Negation Pseudo-Class: The :not() pseudo-class is used to select elements that do not match a certain selector.

How do I use the :nth-child() Pseudo-Class?

The :nth-child() pseudo-class is used to select elements based on their position in a group of siblings. It takes an argument which can be a number, a keyword, or a formula. For example, :nth-child(2) selects the second child, :nth-child(odd) selects all odd children, and :nth-child(2n+1) selects every second child starting from the first.

What is the difference between :hover and :active Pseudo-Classes?

The :hover pseudo-class is triggered when the user places the cursor over an element, while the :active pseudo-class is triggered when the user interacts with an element, such as clicking on a link or button.

How can I style a form element based on its state using Pseudo-Classes?

You can use the :enabled, :disabled, :checked, and :indeterminate pseudo-classes to style form elements based on their state. For example, you can use the :checked pseudo-class to style a checkbox or radio button when it is selected.

Can I combine Pseudo-Classes with other selectors?

Yes, you can combine Pseudo-Classes with other selectors to create more specific selections. For example, you can combine the :first-child pseudo-class with the element selector to select the first child of a specific type.

What is the purpose of the :not() Pseudo-Class?

The :not() pseudo-class is used to select elements that do not match a certain selector. It takes a selector as an argument and selects all elements that do not match this selector.

How does the :nth-last-child() Pseudo-Class work?

The :nth-last-child() pseudo-class is similar to the :nth-child() pseudo-class, but it counts from the end of the group of siblings instead of the beginning. For example, :nth-last-child(2) selects the second to last child.

Can I use Pseudo-Classes with pseudo-elements?

Yes, you can use Pseudo-Classes with pseudo-elements to style specific parts of an element in a specific state. For example, you can use the :first-letter pseudo-element with the :hover pseudo-class to change the style of the first letter of an element when the user hovers over it.

What is the specificity of Pseudo-Classes?

Pseudo-Classes have the same specificity as class selectors. This means that they override type selectors and universal selectors, but are overridden by ID selectors.

Are there any browser compatibility issues with Pseudo-Classes?

Most modern browsers support all CSS Pseudo-Classes. However, some older browsers may not support certain Pseudo-Classes, such as :nth-child() and :nth-last-child(). It’s always a good idea to check the browser compatibility before using a specific Pseudo-Class.