CSS Pseudo-classes
CSS Pseudo-classes
This is a class describing particular state of a selected HTML element. Some important pseudo-classes are Hover, Visited, Active, Link, etc.
Syntax:
Refer this to know their functionality in depth: CSS hover, CSS links.
| Pseudo-class | Description | Example |
|---|---|---|
| :active | Represents an element that has been activated by the user. | a:active{} |
| :any-link | Represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. | a:any-link{} |
| :autofill | Matches an element that has its value autofilled by the browser. | input:autofill{} |
| :checked | Matches any radio, checkbox or option element that is checked or toggled. | input:checked{} |
| :default | Selects form elements that are the default in a group of related elements. | input:default{} |
| :defined | Represents any element that has been defined. | <custom-element>:defined{} |
| :disabled | Represents a disabled element. | input:disabled{} |
| :empty | Matches an element that has no children. | div:empty{} |
| :enabled | Represents an enabled element, after its has been activated. | input:enabled{} |
| :first | Represents the first page of a printed document, with the @page at-rule. | @page:first{} |
| :first-child | Represents the first element among a group of sibling elements. | li:first-child{} |
| :first-of-type | Represents the first element of its type among a group of sibling elements. | p:first-of-type{} |
| :fullscreen | Matches an element that is currently displayed in fullscreen mode. | #id:fullscreen{} |
| :focus | Represents an element that has received focus. | input:focus{} |
| :focus-visible | Applies while an element matches the :focus pseudo-class or receives focus. | input:focus-visible{} |
| :focus-within | Matches an element if the element or any of its descendants are focused. | label:focus-within{} |
| :has() | This represents an element if any of the relative selectors. | :has() |
| :host | This selects the shadow host of the shadow DOM containing the CSS it is used inside. | :host{} |
| :host() | This function selects the shadow host of the shadow DOM containing the CSS it is used inside. | :host() |
| :host-context() | This function allows you to style a custom element based on the classes or attributes of its ancestor elements. | :host-context() |
| :hover | Matches when the user interacts with an element with a pointing device, like a mouse, but does not necessarily activate it. | button:hover{} |
| :indeterminate | Represents any form element whose state is indeterminate or unknown. | input:indeterminate{} |
| :in-range | Represents an element whose current value is within the range limits. | input:in-range{} |
| :invalid | Represents any element whose contents fail to validate. | input:invalid{} |
| :is() | Takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. | :is(ol, ul){} |
| :lang() | Matches an element based on the language they are defined to be in. | *:lang(en){} |
| :last-child | Represents the last element among a group of sibling elements. | li:last-child{} |
| :last-of-type | Represents the last element of its type among a group of sibling elements. | p:last-of-type{} |
| :left | Represents all left-hand pages of a printed document, used with @page at-rule. | @page:left{} |
| :link | Represents an element that has not yet been visited. | a:link{} |
| :modal | Matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. | :modal{} |
| :not() | Represents an element that do not match a list of selectors. | p:not(strong){} |
| :nth-child() | Selects child elements according to their position among all the sibling elements within a parent element. | li:nth-child(-n+3){} |
| :nth-last-child() | Matches elements based on their position among siblings, counting from the last (end) | li:nth-last-child(odd){} |
| :nth-last-of-type() | Matches elements based on their position among siblings of the same type, counting from the last (end). | dd:nth-last-of-type(3n){} |
| :nth-of-type() | Matches elements based on their position among siblings of the same type. | dd:nth-of-type(even){} |
| :only-child | Represents an element without any siblings. | li:only-child{} |
| :only-of-type | Represents an element that has no siblings of same type. | a:only-of-type{} |
| :optional | Represents an element that does not have a required attribute set on it. | input:optional{} |
| :out-of-range | Represents an element whose current value is outside the range limits. | input:out-of-range{} |
| :picture-in-picture | Matches an element that is currently in picture-in-picture mode. | :picture-in-picture{} |
| :placeholder-shown | Represents any element that is currently displaying placeholder text. | input:placeholder-shown{} |
| :read-only | Represents an element that is not editable by the user. | textarea:read-only{} |
| :read-write | Represents an element that is editable by the user. | textarea:read-write{} |
| :required | Represents an element that has a required attribute set on it. | input:required{} |
| :right | Represents all right-hand pages of a printed document, used with @page at-rule. | @page:right{} |
| :root | Matches the root element of a document tree. | :root{} |
| :scope | Represents elements that are a reference point, or scope, for selectors to match with. | :scope{} |
| :target | Represents the target element with an id matching the URL's fragment. | p:target{} |
| :valid | Represents any element whose contents validate successfully. | input:valid{} |
| :visited | Applies once the link has been visited. | a:visited{} |
| :where() | Takes a selector list as its argument and selects any element that matches. | :where(ol, ul){} |