A pseudo-class in CSS is used to add style to an element based on its state. Here is a full list of available pseudo-classes. If you want to learn more about pseudo-classes, click here.
| Selector | Example | Description | Details |
|---|---|---|---|
| :active | a:active | Selects the active element (link) | Details |
| :visited | a:visited | Selects the visited element (link) | Details |
| :link | a:link | Selects the unvisited element (link) | Details |
| :hover | a:hover | Selects an element (link) on mouse hover | Details |
| :checked | input:checked | Selects an input element (checkbox or radio button) that is checked | Details |
| :disabled | input:disabled | Selects an input element that is disabled | Details |
| :focus | input:focus | Selects the element that has focus. | Details |
| :optional | input:optional | Selects an input element that has no required attribute. | Details |
| :out-of-range | input:out-of-range | It is used to style elements when their value is outside of a specified range. Used along with min-max attributes. | Details |
| :read-only | input:read-only | It is used to style elements with readonly attribute. | Details |
| :read-write | input:read-write | It is used to style elements without readonly attribute. | Details |
| :valid | input:valid | It is used to style elements that contain valid value. For example, an email type contains a valid email. | Details |
| :required | input:required | Selects the element that is required. | Details |
| :first-child | p:first-child | Selects the first child of an element. | Details |
| :first-of-type | p:first-of-type | Selects the first element of its type in a group of siblings. | Details |
| :last-child | p:last-child | It is used to target the last element within a specific container. This can be useful when you want to style the last item in a list differently than the rest. | Details |
| :last-of-type | p:last-of-type | Select the last element of a specific type within a parent element. | Details |
| :not(selector) | :not(p) | Allows you to select an element that is not the specified selector. | Details |
| :nth-child(n) | p:nth-child(3) | It is used to select the nth element of a given type within a parent element. | Details |
| :nth-last-child(n) | p:nth-last-child(3) | It is used to select the nth element of its parent, counting from the last child. | Details |
| :nth-last-of-type(n) | p:nth-last-of-type(3) | It selects an element that is the nth child, of a particular type, of its parent, counting from the last child. | Details |
| :nth-of-type(n) | li:nth-of-type(2) | It Selects every li element that is the second li element of its parent. | Details |
| :only-of-type | p:only-of-type | Selects an element that has no siblings of the same type. | Details |
| :only-child | p:only-child | It refers to an element that is the only child of a parent element. | Details |
| :root | root | It allows you to target the highest level element in the document’s tree structure. By using the :root selector, you can apply styles to the entire document, regardless of whether it has been nested inside other elements. | Details |
| :lang(language_code) | p:lang(en) | It is used to match elements based on their language. | Details |