CSS Pseudo-classes Overview

Overview

This lecture explains CSS pseudo-classes: keywords added to selectors to style elements based on their state, attributes, structure, or interaction.

Introduction to Pseudo-classes

• Pseudo-classes are keywords (e.g., :hover) added to selectors to style elements in a specific state.
• They can respond to user actions, element content, position in the DOM, language, or browser history.
• Syntax: selector:pseudo-class { property: value; }
• Multiple pseudo-classes can be chained on one selector.
• Pseudo-classes are different from pseudo-elements, which style part of an element.

Core Categories of Pseudo-classes

Elemental Pseudo-classes

• :defined — selects elements that have been defined.

Element Display State Pseudo-classes

• :open, :popover-open, :modal, :fullscreen, :picture-in-picture — select elements based on their viewing or modal state.

Input/Form Pseudo-classes

• :enabled, :disabled, :read-only, :read-write, :placeholder-shown, :autofill
• :default, :checked, :indeterminate, :blank, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :user-valid, :user-invalid
• Used to style form controls according to their state or attribute.

Linguistic Pseudo-classes

• :dir() — selects elements by text direction (ltr/rtl).
• :lang() — selects elements by language.

Location/Link Pseudo-classes

• :any-link, :link, :visited, :local-link — select link states.
• :target, :target-within, :scope — select based on URL fragments or reference points.

Resource State Pseudo-classes

• :playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked — select media elements by playback or audio state.

Time-dimensional Pseudo-classes

• :current, :past, :future — select elements based on timing, e.g., captions.

Structural Pseudo-classes

• :root, :empty, :nth-child(), :nth-last-child(), :first-child, :last-child, :only-child
• :nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-of-type
• Used to select elements based on DOM tree position.

Shadow DOM Pseudo-classes

• :host, :host(), :host-context(), :has-slotted — select elements inside/outside shadow DOM.

User Action Pseudo-classes

• :hover, :active, :focus, :focus-visible, :focus-within — select elements during interaction.

Functional Pseudo-classes

• :is(), :not(), :where(), :has() — match elements using selector logic.

Custom State Pseudo-classes

• :state() — select custom elements by their custom state.

Page-related Pseudo-classes

• :left, :right, :first, :blank — target pages in paged media/print CSS.

Key Terms & Definitions

• Pseudo-class — keyword added to a selector that styles elements based on state or context.
• Pseudo-element — styles a part of an element (not the whole element).
• Anchor element — the element targeted by a pseudo-class.
• Functional pseudo-class — pseudo-class with arguments in parentheses.

Action Items / Next Steps

• Practice using various pseudo-classes in CSS selectors.
• Review the MDN page for more example selectors and up-to-date browser compatibility.
• Experiment chaining multiple pseudo-classes in your CSS.