CSS Pseudo-classes

CSS pseudo-classes are special selectors that allow you to target and style elements based on their state or position in the document tree.

The pseudo-classes start with a colon (:) and are used in conjunction with regular selectors to apply styles to specific elements.

Here are some commonly used CSS pseudo-classes:

The hover

Targets an element when the mouse cursor is hovering over it.

As an example:

Editor

Loading...

The active

Targets an element while it is being clicked or activated.

As an example:

Editor

Loading...

The focus

Targets an element when it has focus (e.g. when it is selected by the user or when the user tabs through the page).

As an example:

Editor

Loading...

The visited

Targets links that have already been visited by the user.

As an example:

Editor

Loading...

The nth-child()

Targets elements that are a specified child of their parent element (e.g. :nth-child(3) targets the third child element).

As an example:

Editor

Loading...

In this example:

• We have a table with four rows of data.
• We use the :nth-child pseudo-class to apply a background color to every even row, creating a striped effect.
• We achieve this by selecting every second row using the even keyword and applying a new background color to the selected rows.

The first-child

Targets the first child element of its parent element.

As an example:

Editor

Loading...

The last-child

Targets the last child element of its parent element.

As an example:

Editor

Loading...

The not()

Targets elements that do not match the specified selector.

As an example:

Editor

Loading...

All Pseudo Classes

Here's a list of all the pseudo-classes:

Pseudo-class	Description	Example
:active	Selects the active link	a:active { color: red }
:checked	Selects the checked element	input:checked { background-color: yellow }
:disabled	Selects the disabled element	input:disabled { opacity: 0.5 }
:empty	Selects elements that have no children	p:empty { display: none }
:enabled	Selects the enabled element	input:enabled { border-color: green }
:first-child	Selects the first child of an element	li:first-child { font-weight: bold }
:focus	Selects the element that has focus	input:focus { border-color: blue }
:hover	Selects the element that the user is hovering over	a:hover { text-decoration: underline }
:lang	Selects elements with a specified language attribute	p:lang(en) { font-style: italic }
:last-child	Selects the last child of an element	li:last-child { font-weight: bold }
:not	Selects all elements that do not match a selector	:not(p) { margin-bottom: 10px }
:nth-child	Selects elements based on their position among siblings	li:nth-child(odd) { background-color: lightgray }
:nth-last-child	Selects elements based on their position among siblings, counting from the last child	li:nth-last-child(even) { background-color: lightgray }
:only-child	Selects elements that are the only child of their parent	p:only-child { font-size: 24px }
:root	Selects the root element of the document	:root { --main-color: red }
:target	Selects the target element of an anchor link	#section1:target { background-color: yellow }
:checked	Selects a radio button or checkbox that is checked	input[type="checkbox"]:checked { background-color: yellow }
:default	Selects the default button in a form	button:default { border-color: blue }
:dir()	Selects elements with a specified text direction	p:dir(ltr) { text-align: left }
:drop	Selects elements that are being dragged	div:drop { border: 2px dashed gray }
:first-of-type	Selects the first element of its type among siblings	p:first-of-type { font-size: 24px }
:fullscreen	Selects an element that is in full-screen mode	video:fullscreen { width: 100% }
:in-range	Selects an input element with a value within a specified range	input[type="range"]:in-range { background-color: green }
:indeterminate	Selects a checkbox that is in an indeterminate state	input[type="checkbox"]:indeterminate { opacity: 0.5 }
:invalid	Selects an input element with an invalid value	input:invalid { border-color: red }
:last-of-type	Selects the last element of its type among siblings	p:last-of-type { font-size: 24px }
:link	Selects an unvisited link	a:link { color: blue }
:nth-of-type	Selects elements based on their position among siblings, counting only elements of the same type	p:nth-of-type(odd) { background-color: lightgray }
:only-of-type	Selects elements that are the only element of their type among siblings	h1:only-of-type { font-size: 36px }
:optional	Selects an input element that is not required	input:optional { border-color: gray }
:out-of-range	Selects an input element with a value outside a specified range	input[type="range"]:out-of-range { background-color: red }
:required	Selects an input element that is required	input:required { border-color: green }
:valid	Selects an input element with a valid value	input:valid { border-color: green }
:visited	Selects a visited link	a:visited { color: purple }