CSS Pseudo-class Reference Manual

CSS Pseudo-classes

Pseudo-classes are used to define special states of elements.

For example, it can be used for:

  • Set styles when the user hovers over an element
  • Set different styles for visited and unvisited links
  • Set styles when an element gains focus
  • Set styles for form elements that are valid/invalid/required/optional

The following table shows different pseudo-classes in CSS:

Pseudo-classes Example Example Description
:active a:active Select active links
:any-link a:anylink Select all <a> or <area> elements with the href attribute.
:auto-fill input:autofill Select all <input> elements with values automatically filled in by the browser.
:checked option:checked Match all selected <input> or <option> elements.
:default input:default Select the default form element in a set of related elements.
:defined :defined Select all defined elements (standard or custom elements).
:dir() :dir(rtl) Select elements with a specified text direction.
:disabled option:disabled Select all disabled elements, commonly used for form elements.
:empty div:empty Select all elements without child elements (including text nodes).
:enabled input:enabled Select all enabled elements, commonly used for form elements.
:first @page :first Represents the first page of the document to be printed (used with @page rules).
:first-child p:first-child Select an element that is the first child of its parent element (within a group of sibling elements).
:first-of-type li:first-of-type Select the first element of a specific type among a group of sibling elements.
:focus select:focus Select elements that are focused, commonly used for form elements.
:focus-visible button:focus-visible Select elements that are focused (only applies focus styles when focused through the keyboard rather than the mouse).
:focus-within form:focus-within Matches elements or any descendant elements that gain focus.
:fullscreen :fullscreen Select elements that are currently in full-screen mode.
:has() h2:has(+p) Select the <h2> element that immediately follows the <p> element and apply styles to <h2>.
:hover a:hover Select elements that are hovered over with the mouse.
:in-range input:in-range Select <input> elements with values within the specified range.
:indeterminate input:indeterminate Select form elements in an indeterminate state.
:invalid input:invalid Select invalid form elements.
:is() :is(ul, ol) Select all <ul> and <ol> elements.
:lang() p:lang(it) Select <p> elements with the lang attribute set to "it" (Italian).
:last-child li:last-child Select the <li> element that is the last child of its parent element.
:last-of-type p:last-of-type Select the <p> element that is the last <p> element of its parent element.
:left @page :left Represents all left pages of the document to be printed (used with @page rules).
:link a:link Select all unvisited links.
:modal :modal Select elements that are in modal state.
:not() :not(p) Select all elements that are not <p> elements.
:nth-child() p:nth-child(2) Select the <p> element that is the second child of its parent element.
:nth-last-child() p:nth-last-child(2) Select <p> elements that are the second last child of their parent element.
:nth-last-of-type() p:nth-last-of-type(2) Select <p> elements that are the second last child of their parent element.
:nth-of-type() p:nth-of-type(2) Select <p> elements that are the second <p> element of their parent element.
:only-child p:only-child Select <p> elements that are the only child of their parent element.
:only-of-type p:only-of-type Select <p> elements that are the only <p> element of their parent element.
:optional textarea:optional Select <input>, <select>, or <textarea> elements without the required attribute.
:out-of-range input:out-of-range Select <input> elements with values out of the specified range.
:placeholder-shown input:placeholder-shown Select <input> or <textarea> elements currently displaying placeholder text.
:popover-open :popover-open Select elements in a displayed popover state.
:read-only input:read-only Select input elements with the readonly attribute.
:read-write input:read-write Select editable input elements.
:required input:required Select input elements with the required attribute.
:right @page :right Represents all right-hand pages of the document to be printed (used with @page rules).
:root :root Select the root element of the document.
:scope :scope Select elements that serve as a reference point or range for the selector.
:state() :state() Select custom elements with a specified custom state.
:target :target Select the currently active target element.
:user-invalid :user-invalid Select form elements with invalid values (after user interaction).
:user-valid :user-valid Select form elements with valid values (after user interaction).
:valid input:valid Select all input elements with valid values.
:visited a:visited Select all visited links.
:where() :where(ol, ul) Select all <ul> and <ol> elements.