Full List of CSS Pseudo Classes

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