CSS Pseudo-classes & Pseudo-elements Reference

Complete reference for special selectors and generated content

About This Reference

Pseudo-classes (with single colon :) select elements based on their state or position in the document tree. They allow you to style elements when they're being hovered, focused, checked, or based on their position among siblings.

Pseudo-elements (with double colon ::) create virtual elements or target specific parts of elements. They let you insert generated content, style the first letter or line, customize form elements, and more.

This comprehensive reference lists all standard CSS pseudo-classes and pseudo-elements with links to official W3C specifications. For hands-on tutorials with live examples, see the related lessons below.

Pseudo-classes

Pseudo-classes (single colon) select elements based on their state or position

User Action Pseudo-classes

Selector Description Links
:hover Element is being hovered by pointer Demo Spec
:active Element is being activated (clicked) Spec
:focus Element has keyboard focus Demo Spec
:focus-within Element or descendant has focus Spec
:focus-visible Focus should be visible (keyboard navigation) Spec

Child Position Pseudo-classes

Selector Description Links
:first-child First child of parent Demo Spec
:last-child Last child of parent Spec
:only-child Only child of parent Spec
:nth-child(n) Nth child (1-indexed, supports An+B notation like 2n, 3n+1) Demo Spec
:nth-last-child(n) Nth child from end Spec

Type Position Pseudo-classes

Selector Description Links
:first-of-type First sibling of its type Spec
:last-of-type Last sibling of its type Spec
:only-of-type Only sibling of its type Spec
:nth-of-type(n) Nth sibling of its type Spec
:nth-last-of-type(n) Nth sibling of type from end Spec

Form State Pseudo-classes

Selector Description Links
:enabled Enabled form element Spec
:disabled Disabled form element Spec
:checked Checked checkbox or radio button Spec
:indeterminate Indeterminate state checkbox Spec
:required Required form field Spec
:optional Optional form field Spec
:valid Form element that passes validation Spec
:invalid Form element that fails validation Spec
:user-valid Valid after user interaction (avoids red borders on page load) Spec
:user-invalid Invalid after user interaction (better UX than :invalid) Spec
:in-range Input value is within range constraints Spec
:out-of-range Input value is outside range constraints Spec
:read-only Read-only input element Spec
:read-write Editable input element Spec
:placeholder-shown Input currently showing placeholder text Spec
:blank Input or textarea with empty value (distinct from :empty) Spec
:autofill Input autofilled by browser Spec
:default Default form element in group Spec

Structural Pseudo-classes

Selector Description Links
:root Document root element (usually <html>) Spec
:empty Element with no children (including text nodes) Spec

Functional Pseudo-classes

Selector Description Links
:not(selector) Elements NOT matching selector Spec
:is(selector) Matches any of the selectors (forgiving selector list) Spec
:where(selector) Like :is() but with 0 specificity Spec
:has(selector) Parent/previous sibling selector (relational selector) Demo Spec

Language & Direction Pseudo-classes

Selector Description Links
:lang(code) Element in specified language Spec
:dir(ltr|rtl) Element directionality (left-to-right or right-to-left) Spec

Display State Pseudo-classes

Selector Description Links
:fullscreen Element currently in fullscreen mode Spec
:modal Element in modal state (dialog) Spec
:open Details or dialog element in open state Spec
:popover-open Popover element currently in showing state Spec
:picture-in-picture Element in picture-in-picture mode Spec
:playing Media element that is playing (limited browser support) Spec
:paused Media element that is paused (limited browser support) Spec

Scoping Pseudo-classes

Selector Description Links
:scope Reference element for scoping selectors Spec
:host Shadow DOM host element Spec
:host(selector) Shadow host matching selector Spec
:host-context(selector) Shadow host with ancestor matching selector Spec

Other Pseudo-classes

Selector Description Links
:defined Custom element that has been defined Spec
:current Currently displayed element in timed media (e.g., WebVTT captions) Spec
:past Element occurring before current in timed media Spec
:future Element occurring after current in timed media Spec

Page Pseudo-classes

Selector Description Links
:first First page of a printed document Spec
:left Left-hand pages in duplex printing Spec
:right Right-hand pages in duplex printing Spec

Pseudo-elements

Pseudo-elements (double colon) create virtual elements or target specific parts of elements

Generated Content

Selector Description Links
::before Insert generated content before element's actual content Demo Spec
::after Insert generated content after element's actual content Demo Spec
::marker Style list item marker or bullet Demo Spec

Text Fragments

Selector Description Links
::first-letter First letter of block-level element Demo Spec
::first-line First formatted line of block-level element Spec

User Selection

Selector Description Links
::selection Text selected/highlighted by user Spec
::target-text Text targeted by URL text fragment (scroll-to-text highlighting) Spec

Form Elements

Selector Description Links
::placeholder Placeholder text in input or textarea Spec
::file-selector-button Button in file input element Spec

Dialog & Modal

Selector Description Links
::backdrop Backdrop for fullscreen or dialog elements Spec
::details-content Content of details element (enables animation of disclosure widget) Spec

Media Elements

Selector Description Links
::cue Style WebVTT video captions/subtitles Spec

View Transitions

Selector Description Links
::view-transition Root of view transition overlay tree Spec
::view-transition-group(name) Single view transition group container Spec
::view-transition-image-pair(name) Container for old and new view images Spec
::view-transition-old(name) Snapshot of old view state Spec
::view-transition-new(name) Live representation of new view state Spec

Shadow DOM

Selector Description Links
::slotted(selector) Elements placed into a shadow DOM slot Spec
::part(name) Shadow DOM part exposed for styling Spec

Resources & Tools

Demo