CSS Pseudo-classes
CSS pseudo-classes are used to define the special state of an element, such as when a user interacts with it or when an element matches a certain condition. These are represented by a colon (:) followed by the pseudo-class name.
The general syntax for using a pseudo-class is:
</>
Copy
selector:pseudo-class {
property: value;
}Below is a comprehensive list of all CSS pseudo-classes:
| Pseudo-class | Description |
|---|---|
| :hover | Applies when the user hovers over an element. |
| :focus | Applies when an element gains focus (e.g., an input field). |
| :active | Applies when an element is being activated (e.g., clicked). |
| :visited | Targets links that have been visited. |
| :link | Targets links that have not been visited. |
| :first-child | Applies to the first child of a parent element. |
| :last-child | Applies to the last child of a parent element. |
| :nth-child(n) | Targets elements that are the nth child of their parent. |
| :nth-last-child(n) | Targets elements that are the nth child from the end of their parent. |
| :only-child | Applies to an element that is the only child of its parent. |
| :first-of-type | Applies to the first element of a specific type within its parent. |
| :last-of-type | Applies to the last element of a specific type within its parent. |
| :nth-of-type(n) | Targets elements that are the nth of their type within their parent. |
| :nth-last-of-type(n) | Targets elements that are the nth of their type from the end within their parent. |
| :only-of-type | Applies to an element that is the only one of its type within its parent. |
| :empty | Targets elements that have no children, including text nodes. |
| :not(selector) | Applies to elements that do not match the specified selector. |
| :root | Targets the root element of the document (usually html). |
| :checked | Targets checkboxes or radio buttons that are checked. |
| :disabled | Applies to elements that are disabled. |
| :enabled | Applies to elements that are enabled. |
| :required | Targets input fields that are required. |
| :optional | Targets input fields that are optional. |
| :valid | Applies to input fields with valid values. |
| :invalid | Applies to input fields with invalid values. |
| :in-range | Targets input fields with values within a specified range. |
| :out-of-range | Targets input fields with values outside a specified range. |
| :read-only | Targets input fields that are read-only. |
| :read-write | Targets input fields that are editable. |
| :placeholder-shown | Targets input fields showing placeholder text. |
| :target | Applies to an element targeted by a URL fragment (e.g., #section1). |
| :first-letter | Applies to the first letter of a block-level element. |
| :first-line | Applies to the first line of a block-level element. |
| :before | Inserts content before an element’s content. |
| :after | Inserts content after an element’s content. |
| :focus-within | Applies to an element if it or any of its descendants have focus. |
| :focus-visible | Applies when an element is focused and meets user-agent-specific criteria for focus visibility. |
| :is(selector) | Matches any of the selectors in the list. |
| :where(selector) | Matches any of the selectors but has no specificity. |
| :lang(language) | Applies to elements with a matching lang attribute. |
| :has(selector) | Applies to elements containing a specified descendant matching the selector. |