Pseudo-classes

:is()

Matches any element that matches at least one selector in its list. It shortens repeated selectors, and because its list is forgiving, an invalid or unsupported selector inside it is ignored instead of dropping the whole rule.

Pseudo-elements cannot appear inside :is(), so :is(::before, ::after) matches nothing.

:is(article, aside) :is(h2, h3) { margin-block-start: 0; }

:where()

Works exactly like :is() but adds nothing to specificity, so anything written with it is easy to override. Useful for defaults and resets.

:where(ul, ol)[role=list] { list-style: none; }

:not()

Matches elements that do not match any selector in its list. The list is not forgiving: one invalid selector makes the whole :not() invalid.

li:not(:last-child) { border-block-end: 1px solid; }

:has()

Matches an element if any of its relative selectors matches something when measured from that element. With no leading combinator it looks at descendants; with >, + or ~ it looks at children or following siblings. This lets you style a parent by its contents, or an element by what comes after it.

:has() cannot be nested inside another :has(), and pseudo-elements are not allowed in its argument. Its list is not forgiving.

figure:has(figcaption) { padding-block-end: 0; }
h2:has(+ p) { margin-block-end: 0.5rem; }
form:has(:user-invalid) button { opacity: 0.5; }

:link

Matches hyperlinks (such as <a> and <area> with an href) that the user has not visited.

When styling link states, the usual order is :link, :visited, :hover, :active, since they share a specificity and the last match wins.

:visited

Matches hyperlinks the user has already visited. To protect browsing history, only colour-related properties can be changed, and scripts reading the computed style see the unvisited values.

:any-link

Matches every hyperlink, visited or not. It is the same as :is(:link, :visited).

:target

Matches the element whose id matches the fragment of the page URL, such as the element with id="faq" at page.html#faq. If the URL has no fragment, nothing matches.

:target { scroll-margin-block-start: 4rem; outline: 2px solid; }

:target-current

Matches the active scroll marker in a scroll marker group: the ::scroll-marker (or anchor link in a scroll-marker-group) whose target is currently scrolled into view. Use it to highlight the current dot or tab of a carousel.

.carousel > li::scroll-marker:target-current { background: currentColor; }

:target-before, :target-after

Match the scroll markers that come before, or after, the active :target-current marker in the same group. Useful for styling progress indicators.

:scope

Matches the scoping root: the root of an @scope block, or the element a script called querySelector() or closest() on. In a plain stylesheet with no scope it matches the same element as :root.

@scope (.card) {
  :scope { padding: 1rem; }
  :scope > h2 { margin: 0; }
}

:navigation-source

Matches the element that started the current navigation, such as the link that was clicked. It is the CSS reflection of the Navigation API's sourceElement, so a page can style the trigger while the navigation is in progress.

:hover

Matches an element while the user points at it, or at one of its descendants, with a pointing device. Touch screens may apply it only briefly on tap, so do not hide essential content behind it.

Wrap hover-only effects in @media (hover: hover) to keep them off devices that cannot hover.

:active

Matches an element while it is being activated, for example between pressing and releasing the mouse button on a link or button, or while a key is held on it.

:focus

Matches the element that currently has focus and receives keyboard input.

For focus rings, :focus-visible is usually the better choice, since :focus also matches a button the user just clicked with the mouse.

:focus-visible

Matches the focused element when the browser decides focus should be shown, typically after keyboard navigation, and always for text fields, but not after a mouse click on a button.

:focus-visible { outline: 3px solid; outline-offset: 2px; }

:focus-within

Matches an element that has focus or contains the focused element, including through shadow trees. Use it to highlight a whole form row or open a menu while focus is inside it.

:enabled, :disabled

:disabled matches form controls and other interface elements that are disabled, for example by the disabled attribute or by sitting inside a disabled <fieldset>. :enabled matches those that could be disabled but are not.

:checked

Matches checkboxes and radio buttons that are checked, and <option> elements that are selected.

:indeterminate

Matches controls in neither an on nor an off state: a checkbox whose indeterminate property is set by script, a radio group where no button is checked, and a <progress> element with no value.

:default

Matches the default item among a set: a form's default submit button, checkboxes and radio buttons that are checked by default in the markup, and options selected by default.

:valid, :invalid

Match form controls, and forms and fieldsets containing them, whose value passes or fails its constraints, such as required, type=email or pattern. They apply as soon as the page loads, before the user has typed anything.

:user-valid, :user-invalid

Like :valid and :invalid, but only once the user has interacted with the control, for example by changing it and moving focus away, or by trying to submit the form. This avoids flagging empty required fields before anyone has touched them.

input:user-invalid { border-color: crimson; }

:in-range, :out-of-range

Match inputs that have range limits, such as min and max on a number or date input, when their value is inside or outside those limits. Inputs without limits match neither.

:required, :optional

:required matches form controls that must have a value before the form can be submitted, usually through the required attribute. :optional matches form controls that do not. Elements that are not form controls match neither.

:read-only, :read-write

:read-write matches elements the user can edit: text inputs and textareas that are not readonly or disabled, and contenteditable elements. Every other element matches :read-only.

:placeholder-shown

Matches an input or textarea while it is showing its placeholder text, which in practice means while it is empty. The placeholder text itself is styled with ::placeholder.

input:not(:placeholder-shown) + label { translate: 0 -1.5em; }

:autofill

Matches inputs whose value the browser has filled in automatically, until the user edits them. Browsers apply their own autofill colours that may be hard to override.

:root

Matches the root element of the document, which is <html> in HTML. It is the usual place to declare custom properties for the whole page, as it has higher specificity than html.

:root { --accent: #ffd21a; }

:empty

Matches an element with no children at all: no elements and no text. Comments do not count, but in current browsers whitespace does, so an element containing only a line break does not match.

:first-child

Matches an element that is the first element among its siblings. Same as :nth-child(1).

:last-child

Matches an element that is the last element among its siblings. Same as :nth-last-child(1).

:only-child

Matches an element that has no sibling elements. Same as :first-child:last-child, but with lower specificity.

:nth-child()

Matches elements by their position among all their sibling elements, counting from the first. With of S, only siblings matching the selector list S are counted, and the element itself must match S.

tr:nth-child(even) { background: #f4f4f4; }
li:nth-child(-n+3 of .featured) { font-weight: bold; }

:nth-last-child()

Like :nth-child(), but counts from the last sibling backwards. :nth-last-child(-n+2) matches the last two.

li:first-child:nth-last-child(n+5) ~ li { font-size: 0.9em; }

:first-of-type

Matches an element that is the first sibling of its element type. p:first-of-type matches the first paragraph even if a heading comes before it. Same as :nth-of-type(1).

:last-of-type

Matches an element that is the last sibling of its element type. Same as :nth-last-of-type(1).

:only-of-type

Matches an element that has no siblings of the same element type. Same as :first-of-type:last-of-type, but with lower specificity.

:nth-of-type()

Matches elements by their position among siblings of the same element type, counting from the first.

img:nth-of-type(odd) { float: inline-start; }

:nth-last-of-type()

Like :nth-of-type(), but counts from the last sibling of the type backwards.

:open

Matches an element that has open and closed states and is currently open: a <details> that is expanded, a <dialog> that is showing, or a <select> or <input> whose picker is showing.

:modal

Matches an element that blocks interaction with the rest of the page until it is dismissed, such as a <dialog> opened with showModal().

:popover-open

Matches an element with the popover attribute while it is showing.

[popover] { opacity: 0; transition: opacity 0.2s, display 0.2s allow-discrete; }
[popover]:popover-open { opacity: 1; }
@starting-style { [popover]:popover-open { opacity: 0; } }

:fullscreen

Matches an element that is displayed full screen, for example after a script calls requestFullscreen() on it.

:picture-in-picture

Matches an element, usually a <video>, while its content is playing in a picture-in-picture window that floats over other content.

:defined

Matches elements that are defined: every built-in HTML element, and custom elements once customElements.define() has registered them. Use :not(:defined) to hide or reserve space for custom elements before their script loads.

my-tabs:not(:defined) { visibility: hidden; }

:state()

Matches a custom element that has the named custom state, which its script adds to ElementInternals.states. It lets a component expose states, such as :state(loading), the way built-in elements expose :checked.

:heading

Matches elements that have a heading level in the document language, which in HTML means <h1> to <h6>. It is shorthand for :is(h1, h2, h3, h4, h5, h6) with the specificity of one pseudo-class.

:interest-source, :interest-target

:interest-source matches an element with the interestfor attribute while the user is showing interest in it, for example by hovering or focusing it. :interest-target matches the element it points to, such as the popover it reveals.

:xr-overlay

Matches the element being shown as a DOM overlay during an immersive WebXR session, so page content such as controls can be styled for display over the AR view.

:playing, :paused

:playing matches a media element that is playing, including while it is briefly waiting for data. :paused matches one that is not playing, whether it was paused or has not started or has ended.

:seeking

Matches a media element while it is seeking to a new playback position.

:buffering

Matches a playing media element that cannot continue because it is still loading data. Use it to show a loading indicator.

:stalled

Matches a media element that is trying to load data but has received none for some time.

:muted

Matches a media element that can make sound but is currently muted.

:volume-locked

Matches a media element whose volume is locked by the browser or the user, so the page cannot change it. Use it to hide a volume slider that would do nothing.

:past, :future

Inside a WebVTT caption cue, match the parts of the cue text whose timestamps are before or after the current playback position. They are used inside ::cue() for karaoke-style captions that change as each word is spoken.

::cue(:future) { color: gray; }

:lang()

Matches elements in a given human language, as set by the lang attribute on the element or an ancestor. A range matches its sub-languages: :lang(en) matches en, en-GB and en-US. Unlike [lang|=en], it also matches descendants that inherit the language.

:lang(de) { quotes: '„' '“'; }

:dir()

Matches elements by their text direction, left-to-right or right-to-left, as worked out by the document language. Unlike [dir=rtl], it follows inherited direction and the result of dir="auto".

:host, :host()

In a shadow tree's stylesheet, :host matches the shadow host: the custom element the shadow root is attached to. :host() matches the host only if it also matches the compound selector given. Outside a shadow tree both match nothing. Styles from the page outside win over :host rules.

:host { display: block; }
:host([disabled]) { opacity: 0.5; }

:host-context() Deprecated

Matches the shadow host if it, or any ancestor outside the shadow tree, matches the compound selector given. Only Chrome supports it and the other engines do not plan to. To let a component react to its surroundings, pass the information in with an inherited custom property instead.

:has-slotted

Matches a <slot> element that has content assigned to it from the light DOM. Use it to hide a slot's wrapper or fallback styling when nothing is slotted.

:active-view-transition

Matches the root element while a view transition is running. Use it to apply styles only during the transition.

:active-view-transition-type()

Matches the root element while a view transition with at least one of the given types is running. Types are set by startViewTransition({ types }) or by the types descriptor of @view-transition, so one stylesheet can animate forward and back navigations differently.

:active-view-transition-type(back)::view-transition-old(root) {
  animation-name: slide-out-right;
}

:first

Matches the first page of a printed document.

@page :first { margin-block-start: 6cm; }

:left, :right

Match left-hand and right-hand pages of a double-sided document. Every page is one or the other; whether the first page is a right or a left page depends on the writing direction of the root element.

@page :left { margin-inline-end: 3cm; }
@page :right { margin-inline-start: 3cm; }