====== CSS: Pseudo-classes ====== 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 ===== Elemental pseudo-classes ===== Relate to the core identity of elements. ==== :defined ==== Matches any element that is defined. ==== :heading ==== Matches any heading element (''

''-''

''). ---- ===== Element display state pseudo-classes ===== These pseudo-classes enable the selection of elements based on their display states. ==== :open ==== 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: ''
'', '''', '''', '''' has been autofilled by the browser. ==== :default ==== Matches one or more UI elements that are the default among a set of elements. ==== :checked ==== Matches when elements such as checkboxes and radio buttons are toggled on. ==== :indeterminate ==== Matches UI elements when they are in an indeterminate state. ==== :blank ==== Matches a user-input element which is empty, containing an empty string or other null input. ==== :valid ==== 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. ==== :invalid ==== Matches an element with invalid contents. For example, an input element with type 'email' with a name entered. ==== :in-range ==== Applies to elements with range limitations. For example, a slider control when the selected value is in the allowed range. ==== :out-of-range ==== Applies to elements with range limitations. For example, a slider control when the selected value is outside the allowed range. ==== :required ==== Matches when a form element is required. ==== :optional ==== Matches when a form element is optional. ==== :user-valid ==== Represents an element with correct input, but only when the user has interacted with it. ==== :user-invalid ==== Represents an element with incorrect input, but only when the user has interacted with it. ---- ===== Linguistic pseudo-classes ===== These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction. ==== :dir() ==== 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; } ==== :lang() ==== Select an element based on its content language. /* Select element with the lang="en-US" attribute */ *:lang(en-US) { background-color: pink; } ---- ===== Location pseudo-classes ===== These pseudo-classes relate to links, and to targeted elements within the current document. ==== :any-link ==== Matches an element if the element would match either '':link'' or '':visited''. ==== :link ==== Matches links that have not yet been visited. ==== :visited ==== Matches links that have been visited. ==== :local-link ==== Matches links whose absolute URL is the same as the target URL. For example, anchor links to the same page. ==== :target ==== 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; } ==== :scope ==== Represents elements that are a reference point for selectors to match against. ---- ===== Resource state pseudo-classes ===== 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. ==== :playing ==== Represents a playable element that is playing. ==== :paused ==== Represents a playable element that is paused. ==== :seeking ==== Represents a playable element that is currently seeking a playback position in the media resource. ==== :buffering ==== Represents a playable element that is playing but is temporarily stalled because it is downloading the media resource. ==== :stalled ==== Represents a playable element that is playing but is stalled because it cannot download the media resource. ==== :muted ==== Represents a sound-producing element that is muted. ==== :volume-locked ==== Represents a sound-producing element that has its volume level locked by the browser. ---- ===== Tree-structural pseudo-classes ===== These pseudo-classes relate to the location of an element within the document tree. ==== :root ==== Represents an element that is the root of the document. In HTML this is usually the '''' element. ==== :empty ==== Represents an element with no children other than white-space characters. ==== :nth-child() ==== 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
  • element in a list */ li:nth-child(7) { } /* Selects the seventh and all following elements */ :nth-child(n+7) { } ==== :nth-last-child() ==== Matches elements based on their position among a group of siblings, counting from the end. Uses ''An+B'' notation. ==== :first-child ==== Matches an element that is the first of its siblings. ==== :last-child ==== Matches an element that is the last of its siblings. ==== :only-child ==== Matches an element that has no siblings. For example, a list item with no other list items in that list. ==== :heading() ==== 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. ==== :nth-of-type() ==== Matches elements based on their position among siblings of the **same type** (tag name). Uses ''An+B'' notation. ==== :nth-last-of-type() ==== Matches elements based on their position among siblings of the **same type** (tag name), counting from the end. ==== :first-of-type ==== Represents the first element of its type (tag name) among a group of sibling elements. /* Selects the first

    element among siblings */ p:first-of-type { } ==== :last-of-type ==== Represents the last element of its type (tag name) among a group of sibling elements. /* Selects the last

    element among siblings */ p:last-of-type { } ==== :only-of-type ==== Represents an element that has no siblings of the **same type** (tag name). ---- ===== User action pseudo-classes ===== These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element. ==== :hover ==== Matches when a user designates an item with a pointing device, such as holding the mouse pointer over the item. ==== :active ==== Matches when an item is being activated by the user. For example, when the item is clicked on. ==== :focus ==== Matches when an element has focus. ==== :focus-visible ==== Matches when an element has focus and the user agent identifies that the element should be visibly focused. ==== :focus-within ==== Matches an element to which '':focus'' applies, plus any element that has a descendant to which '':focus'' applies. ==== :target-current ==== Selects the active scroll marker — the scroll marker of a [[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-marker-group|scroll-marker-group]] that is currently scrolled to. This selector can be used to style the active navigation position within a scroll marker group. ---- ===== Functional pseudo-classes ===== 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. ==== :is() ==== 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; } ==== :not() ==== The "matches none" pseudo-class. Represents elements that do not match a list of selectors. /* Matches all

    elements without the class .irrelevant */ p:not(.irrelevant) { font-weight: bold; } ==== :where() ==== 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. ==== :has() ==== 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.