Pseudo-classes - The Basics

(Adapted from "HTML5 & CSS3 for the Real World" by Alexis Goldstein, Louis Lazaris and Estelle Weyl)

Core points

CSS pseudo-class is used to define the special state of an element, including structure, user operations, input and negative pseudo-classes. They can style elements based on the location of the element in the document tree, user interaction, form element state, or elements that do not match a particular selector.

Some pseudo-classes may have security issues, such as :visited pseudo-classes, which can be used by an attacker to check the user's browsing history. Modern browsers limit the styles that can be applied to :visited to prevent this problem. To improve accessibility, it is recommended to add :hover where :focus is included, because not all visitors use the mouse to browse the website.

While most modern browsers support all CSS pseudo-classes, some older browsers may not support certain pseudo-classes, such as :nth-child() and :nth-last-child(). JavaScript libraries like Selectivizr can be used to locate these pseudo-classes in browsers lacking support such as Internet Explorer.

CSS pseudo-class

You may already be familiar with some user interaction pseudo-classes, namely :link, :visited, :hover, :active, :focus and

.

Important Tips: Key Points

:visited:visitedThe pseudo-class may have security issues, so the browser does not support applying all CSS properties on the visited link. Without these restrictions, a malicious website can check if the user has visited a popular website or bank for the style of the visited links (for example, a background image unique to each visited link app). This allows an attacker to view the user's browsing history without permission. Therefore, modern browsers limit the styles that can be applied to :hover. The specification explicitly allows these changes, stating that User Agents (UAs) can treat all links as unreached links, or implement other measures to protect user privacy while presenting different ways of accessed and unreached links. To improve accessibility, add :focus where :hover is included, because not all visitors use the mouse to browse your website. :focus can be applied to any element on the page, not just links and form controls. :active and tabindex are related to links, form controls, editable content elements, and any element with

attributes.

While you may have been using these basic pseudo-classes for a while, there are many other pseudo-classes available. Some of these pseudo-classes have been around the specification for years, but were not supported (or generally understood) until browsers began supporting new HTML5 form properties that make them more relevant. The following pseudo-class matches elements based on attributes, user interactions, and form control status:

• :enabled: Enabled user interface element, basically any form control that supports the disabled attribute but does not currently apply that attribute.
• :disabled: Instead, disabled user interface element: any form control that supports the disabled attribute and currently has that attribute applied.
• :checked: A radio button or check box that has been selected or checked.
• :indeterminate: The form element that is neither selected nor unselected. For example, if you check the Select All check box to select a set of check boxes and then deselect some but not all check boxes in the group, you can set Select All to an uncertain state (using JavaScript) to indicate that it is neither selected nor unchecked.
• :target: This selector selects the target element of the anchor point in the currently active page. This sounds more complicated than it actually is: You already know that you can create a link to an anchor within the page by using the # character before the target's ID. For example, you might have a "Skip to Content" link in your page, and after clicking that link, it will jump to an element with ID "content". This changes the URL in the address bar to thispage.html#content, and the :target selector now matches the element in the document with the ID "content". It's like you temporarily included the selector #content. We say "temporary" because once the user clicks on a different anchor point, :target will match the new target.
• :default: Applied to one or more UI elements that are default values ​​in a set of similar elements. For example, if a radio button in a set of radio buttons with the same name is selected when the page is loaded, it will continue to match :default after another radio button in the group with the same name is selected. Similarly, the checkbox that was selected when the page loads will continue to match :default after being unchecked.
• :valid: Elements that are valid based on type, pattern, or other input properties (as we discussed in Chapter 4).
• :invalid: Empty required elements and elements that cannot meet the requirements of type or pattern attribute definitions.
• :in-range: Elements with range limits and values ​​within these limits. For example, this applies to date/time, number, and range input types with min and max properties. When the value is null, it is :in-range.
• :out-of-range: Antonym of :in-range: an element whose value exceeds its range limit. Missing values ​​are not in the range because they are empty.
• :required: The form control with the :required attribute set.
• :optional: All form controls without :required attributes.
• :read-only: The element of the user cannot change its content. Most of these are elements except for the elements with the contenteditable attribute set and the form field.
• :read-write: The user can change elements of their content, such as the contenteditable component and writable input fields.

In browsers that support properties in their form controls, browser support for these properties is complete; in other words, browsers that support required and pattern also support the related :valid and :invalidPseudo-category. IE8 and earlier versions do not support :checked, :enabled, :disabled, and :target. The good news is that IE9 does support these selectors, but not user interface selectors. IE10 and IE11 support :indeterminate, :required and :optional, but do not support :default, :in-range, :out-of-range, :read-only, :read-write,

or

. While support is still lacking, JavaScript libraries like Selectivizr can help locate these pseudo-classes in Internet Explorer.

FAQs for CSS pseudo-classes (FAQs)

(The FAQs part is omitted here because the length is too long and does not match the pseudo-original goal. Some FAQs can be selectively retained or rewritten as needed and remain consistent with the original meaning.)

The above is the detailed content of Pseudo-classes - The Basics. For more information, please follow other related articles on the PHP Chinese website!