CSS

🎨 What Are Pseudo Classes in CSS?

Pseudo classes in CSS are used to target a special state or condition of an HTML element.

They allow you to style elements dynamically based on user interaction, element status, or position in the document structure.

Pseudo classes always start with a colon :.

CSS


a:hover {
  color: red;
}

This code changes the color of a link when the mouse cursor hovers over it.

These pseudo classes are commonly used with links (<a> elements).

Pseudo Class	Description	Example
:link	Targets unvisited links	a:link { color: blue; }
:visited	Targets visited links	a:visited { color: purple; }
:hover	Activated when the mouse hovers	a:hover { color: red; }
:active	Activated while clicking	a:active { color: orange; }
:any-link	Targets all links with URLs	a:any-link { text-decoration: underline; }

These pseudo classes are used with form elements like <input>, <textarea> and <select>

Pseudo Class	Description	Example
:focus	Element is focused	input:focus { border: 2px solid blue; }
:checked	Checkbox or radio is selected	input:checked { accent-color: green; }
:disabled	Disabled element	input:disabled { background: #ddd; }
:enabled	Enabled element	input:enabled { background: white; }
:required	Required input field	input:required { border: 2px solid red; }
:optional	Optional input field	input:optional { border: 1px dashed gray; }
:valid	Valid input value	input:valid { border-color: green; }
:invalid	Invalid input value	input:invalid { border-color: red; }
:in-range	Value within range	input:in-range { color: green; }
:out-of-range	Value outside range	input:out-of-range { color: red; }
:read-only	Read-only input	input:read-only { background: #f0f0f0; }
:read-write	Editable input	input:read-write { background: #fff; }

Structural pseudo classes select elements based on their position within the HTML structure.

Pseudo Class	Description	Example
:first-child	First child element	li:first-child { color: red; }
:last-child	Last child element	li:last-child { color: blue; }
:only-child	Only child element	p:only-child { font-weight: bold; }
:first-of-type	First element of its type	p:first-of-type { color: green; }
:last-of-type	Last element of its type	p:last-of-type { color: orange; }
:only-of-type	Only element of its type	p:only-of-type { text-decoration: underline; }
:nth-child(n)	Specific child position	li:nth-child(2) { color: purple; }
:nth-last-child(n)	Child position from the end	li:nth-last-child(1) { color: pink; }
:nth-of-type(n)	Specific type position	p:nth-of-type(2) { color: blue; }
:nth-last-of-type(n)	Type position from the end	p:nth-last-of-type(1) { color: red; }

Pseudo Class	Description	Example
:root	Targets the root element (`<input>`)	:root { --main-color: #333; }
:empty	Elements without content	p:empty { display: none; }
:target	Element targeted in the URL	#section1:target { background: yellow; }
:not(selector)	Excludes specific elements	p:not(.special) { color: gray; }
:lang()	Styles based on language	p:lang(tr) { font-family: 'Open Sans'; }

CSS


selector:pseudo-class {
  property: value;
}

The most popular pseudo classes in modern web development are:

These are frequently used for interactive and responsive user interfaces.

CSS Selectors

What Is Specificity in CSS?