A CSS pseudo-class is a keyword added to a selector that lets you select elements based on information that lies outside of the document tree, such as a specific state of the selected element(s). For example, the pseudo-class :hover can be used to style a button when a user's pointer hovers over it.

Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes

Relate to the core identity of elements.

Matches any element that is defined.

Matches any heading element (<h1>-<h6>).

These pseudo-classes enable the selection of elements based on their display states.

Represents an element that has open and closed states, only when it is currently in the open state.

The following elements have the ability to be opened: <details>, <dialog>, <input>, <select>.

Matches a popover element that is currently in the showing state.

Matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.

Matches an element that is currently in fullscreen mode.

Matches an element that is currently in picture-in-picture mode.

Matches the DOM overlay element during an immersive AR or VR session.

These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

Represents a user interface element that is in an enabled state.

Represents a user interface element that is in a disabled state.

Represents any element that cannot be changed by the user.

Represents any element that is user-editable.

Matches an input element that is displaying placeholder text.

Matches when an <input> has been autofilled by the browser.

Matches one or more UI elements that are the default among a set of elements.

Matches when elements such as checkboxes and radio buttons are toggled on.

Matches UI elements when they are in an indeterminate state.

Matches a user-input element which is empty, containing an empty string or other null input.

Matches an element with valid contents. For example, an input element with the type 'email' that contains a validly formed email address or an empty value if the control is not required.

Matches an element with invalid contents. For example, an input element with type 'email' with a name entered.

Applies to elements with range limitations. For example, a slider control when the selected value is in the allowed range.

Applies to elements with range limitations. For example, a slider control when the selected value is outside the allowed range.

Matches when a form element is required.

Matches when a form element is optional.

Represents an element with correct input, but only when the user has interacted with it.

Represents an element with incorrect input, but only when the user has interacted with it.

These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.

The directionality pseudo-class selects an element based on its directionality as determined by the document language.

/* Selects any element with right-to-left text */
 
:dir(rtl) {
  background-color: red;
}

Select an element based on its content language.

/* Select element with the lang="en-US" attribute */
 
*:lang(en-US) {
  background-color: pink;
}

These pseudo-classes relate to links, and to targeted elements within the current document.

Matches an element if the element would match either :link or :visited.

Matches links that have not yet been visited.

Matches links that have been visited.

Matches links whose absolute URL is the same as the target URL. For example, anchor links to the same page.

Matches the element which is the target of the document URL. For example:

/* Selects document's target element:
/* Current URL = http://www.example.com/help/#setup 
/* this CSS will select the element with id="setup" */
 
:target {
  border: 2px solid black;
}

Represents elements that are a reference point for selectors to match against.

These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

Represents a playable element that is playing.

Represents a playable element that is paused.

Represents a playable element that is currently seeking a playback position in the media resource.

Represents a playable element that is playing but is temporarily stalled because it is downloading the media resource.

Represents a playable element that is playing but is stalled because it cannot download the media resource.

Represents a sound-producing element that is muted.

Represents a sound-producing element that has its volume level locked by the browser.

These pseudo-classes relate to the location of an element within the document tree.

Represents an element that is the root of the document. In HTML this is usually the <html> element.

Represents an element with no children other than white-space characters.

Selects child elements according to their position among all the sibling elements within a parent element. Uses An+B notation.

/* Selects odd rows of an HTML table */
tr:nth-child(odd) { }
 
/* Selects the seventh <li> element in a list */
li:nth-child(7) { }
 
/* Selects the seventh and all following elements */
:nth-child(n+7) { }

Matches elements based on their position among a group of siblings, counting from the end. Uses An+B notation.

Matches an element that is the first of its siblings.

Matches an element that is the last of its siblings.

Matches an element that has no siblings. For example, a list item with no other list items in that list.

Represents all heading elements whose levels match a comma-separated list of integers. This allows you to style elements at specific heading levels at once, rather than matching and styling them individually. Uses An+B notation.

Matches elements based on their position among siblings of the same type (tag name). Uses An+B notation.

Matches elements based on their position among siblings of the same type (tag name), counting from the end.

Represents the first element of its type (tag name) among a group of sibling elements.

/* Selects the first <p> element among siblings */
 
p:first-of-type { }

Represents the last element of its type (tag name) among a group of sibling elements.

/* Selects the last <p> element among siblings */
 
p:last-of-type { }

Represents an element that has no siblings of the same type (tag name).

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

Matches when a user designates an item with a pointing device, such as holding the mouse pointer over the item.

Matches when an item is being activated by the user. For example, when the item is clicked on.

Matches when an element has focus.

Matches when an element has focus and the user agent identifies that the element should be visibly focused.

Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.

Selects the active scroll marker — the scroll marker of a scroll-marker-group that is currently scrolled to. This selector can be used to style the active navigation position within a scroll marker group.

These pseudo-classes accept a selector list or forgiving selector list as a parameter.

Forgiving selector list: :is() and :where() accept forgiving selector lists. This means that if any of the selectors provided are invalid, they will simply be ignored instead of breaking the entire rule.

The “matches any” pseudo-class. Takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a much more compact form.

/* More cumbersome */
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 32px;
}
 
/* More compact */
:is(section, article, aside, nav) h1 {
  font-size: 32px;
}

The “matches none” pseudo-class. Represents elements that do not match a list of selectors.

/* Matches all <p> elements without the class .irrelevant */
 
p:not(.irrelevant) {
  font-weight: bold;
}

Takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.

Represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.