CSS Pseudo-class Reference
This complete CSS pseudo-class list organizes pseudo-classes by purpose, making it easier to find selectors for element states, user interaction, forms, document structure, media, links, shadow DOM, and other conditions.
Use the search box to find a pseudo-class by name or description, or switch to the alphabetical view when you already know the pseudo-class you are looking for. Each pseudo-class links to its complete CSS reference page.
Search CSS Pseudo-classes
Enter a pseudo-class name or a word describing what the pseudo-class does. The list will automatically display matching pseudo-classes.
No CSS pseudo-classes found.
Display State
Display-state pseudo-classes select elements according to how they are currently displayed or presented.
:fullscreenSelects an element currently displayed in fullscreen mode.:modalSelects an element in a state that prevents interaction with elements outside it.:openSelects an element that has open and closed states when it is currently open.:picture-in-pictureSelects an element currently displayed in picture-in-picture mode.:popover-openSelects a popover element while it is being shown.Elemental
Elemental pseudo-classes select elements according to their definition or other element-specific state.
:definedSelects elements that have been defined, including built-in and successfully defined custom elements.:headingSelects heading elements.:heading()Selects heading elements at specified heading levels.:state()Selects custom elements that have the specified custom state.:xr-overlaySelects an element while it is being presented as a WebXR overlay.Form & Input
Form and input pseudo-classes select form controls according to their values, requirements, validity, and interaction states.
:autofillSelects an input whose value has been automatically filled by the browser.:blankSelects an input element whose value is blank.:checkedSelects checked radio buttons, checkboxes, and selected options.:defaultSelects the default element among a group of related form controls.:disabledSelects user interface elements that are disabled.:enabledSelects user interface elements that are enabled.:in-rangeSelects an input whose current value is within its permitted range.:indeterminateSelects form controls whose state is indeterminate.:invalidSelects form elements whose value does not satisfy validation requirements.:optionalSelects form controls that are not required.:out-of-rangeSelects an input whose current value is outside its permitted range.:placeholder-shownSelects an input or textarea while placeholder text is being displayed.:read-onlySelects elements whose contents cannot be edited by the user.:read-writeSelects elements whose contents can be edited by the user.:requiredSelects form controls that must have a value before a form can be submitted.:user-invalidSelects an invalid form control after the user has interacted with it.:user-validSelects a valid form control after the user has interacted with it.:validSelects form elements whose value satisfies validation requirements.Functional
Functional pseudo-classes accept selector or other arguments that determine which elements are matched.
:has()Selects an element when one or more relative selectors match in relation to that element.:is()Matches any element that can be selected by one of the selectors in its selector list.:not()Matches elements that do not match the selectors in its selector list.:where()Matches elements from a selector list without adding specificity.Linguistic
Linguistic pseudo-classes select elements according to language and writing direction.
Location
Location pseudo-classes select links and document targets according to URL and navigation state.
:any-linkSelects elements that act as links, whether visited or unvisited.:linkSelects links that have not been visited.:local-linkSelects links whose target URL matches the user's current location according to the defined matching conditions.:scopeRepresents the reference element or scoping root for matching selectors.:targetSelects the element targeted by the document URL fragment.:target-afterSelects elements according to their position after the current scroll-marker target.:target-beforeSelects elements according to their position before the current scroll-marker target.:target-currentSelects the currently active scroll-marker target.:visitedSelects links that the user has previously visited.Media & Resource State
Media and resource-state pseudo-classes select media elements according to playback, loading, audio, and resource states.
:bufferingSelects a media element while it is buffering content.:mutedSelects a media element while its audio output is muted.:pausedSelects a media element while playback is paused.:playingSelects a media element while it is playing.:seekingSelects a media element while it is seeking a playback position.:stalledSelects a media element when playback is stalled while waiting for media data.:volume-lockedSelects a media element when its audio volume is locked.Page
Page pseudo-classes select pages according to their position when content is printed or otherwise presented as paged media.
Shadow DOM
Shadow DOM pseudo-classes select shadow hosts and elements according to shadow-tree relationships and states.
:has-slottedSelects a slot element when content has been assigned to it.:hostSelects the shadow host of the shadow tree containing the CSS.:host()Selects the shadow host when it matches the supplied selector.:host-context()Selects a shadow host according to matching conditions outside the shadow tree.Structural
Structural pseudo-classes select elements according to their position and relationships within the document tree.
:emptySelects elements that have no child elements or text content.:first-childSelects an element that is the first child of its parent.:first-of-typeSelects the first sibling of its element type.:last-childSelects an element that is the last child of its parent.:last-of-typeSelects the last sibling of its element type.:nth-child()Selects elements according to their position among siblings.:nth-last-child()Selects elements according to sibling position, counting from the end.:nth-last-of-type()Selects elements by type and position, counting from the end.:nth-of-type()Selects elements according to their position among siblings of the same type.:only-childSelects an element that has no siblings.:only-of-typeSelects an element with no siblings of the same element type.:rootSelects the root element of the document tree.Time-dimensional
Time-dimensional pseudo-classes select elements according to their position relative to a current point in time.
:currentSelects an element currently being presented in a time-dimensional context.:current()Selects a current element that matches the supplied selector conditions.:futureSelects elements occurring after the currently presented element.:pastSelects elements occurring before the currently presented element.User Action
User-action pseudo-classes select elements according to user interaction, focus, and interest states.
:activeSelects an element while it is being activated by the user.:focusSelects an element that currently has focus.:focus-visibleSelects a focused element when the browser determines that a visible focus indicator should be shown.:focus-withinSelects an element when it or one of its descendants has focus.:hoverSelects an element while a pointing device is positioned over it.:interest-sourceSelects an interest invoker while interest is being shown for its target.:interest-targetSelects an interest target while interest is being shown.View Transition
View-transition pseudo-classes select the document root according to the state and type of an active view transition.
:active-view-transitionSelects the document root while a view transition is active.:active-view-transition-type()Selects the document root when an active view transition has the specified transition type.CSS Pseudo-classes A-Z
All CSS pseudo-classes in this reference are shown alphabetically below.