CSS Pseudo-classes &
Pseudo-elements

Pseudo-classes commonly used for links, pointer interaction, and keyboard focus.

Term / Syntax	Name	Description	Example
:hover	Pointer Hover	Matches while a pointing device is over the element.	a:hover { text-decoration-thickness: 2px; }
:focus	Focus State	Matches an element that currently has focus.	input:focus { border-color: #4eabcc; }
:focus-visible	Visible Focus	Matches focus when a visible focus indicator is appropriate.	button:focus-visible { outline: 3px solid #baf553; }
:focus-within	Descendant Focus	Matches an element when it or one of its descendants has focus.	.field:focus-within { border-color: #4eabcc; }
:active	Activation State	Matches while an element is being activated.	button:active { transform: translateY(1px); }
:visited	Visited Link	Matches links whose destination has been visited, subject to privacy restrictions.	a:visited { color: rebeccapurple; }

Selectors based on an element's position or type among siblings.

Term / Syntax	Name	Description	Example
:first-child	First Child	Matches an element that is its parent's first child.	li:first-child { margin-top: 0; }
:last-child	Last Child	Matches an element that is its parent's last child.	li:last-child { margin-bottom: 0; }
:nth-child()	Nth Child	Matches children using a numeric or An+B pattern.	tr:nth-child(even) { background: #f6fafb; }
:first-of-type	First of Type	Matches the first sibling of its element type.	p:first-of-type { font-weight: 600; }
:last-of-type	Last of Type	Matches the last sibling of its element type.	p:last-of-type { margin-bottom: 0; }
:only-child	Only Child	Matches an element with no siblings.	li:only-child { list-style: none; }

Functions that group, exclude, or select based on related elements.

Term / Syntax	Name	Description	Example
:not()	Negation	Matches elements that do not match its selector list.	button:not(.primary) { opacity: .8; }
:is()	Selector Grouping	Matches if any selector in its list matches and adopts the most specific argument.	:is(h1, h2, h3) { line-height: 1.2; }
:where()	Zero-Specificity Grouping	Groups selectors without adding specificity from its arguments.	:where(nav, footer) a { text-decoration: none; }
:has()	Relational Selector	Matches an element when it contains or relates to an element matching the selector.	.field:has(:invalid) { border-color: crimson; }

Special generated boxes or portions of an element that can be styled.

Term / Syntax	Name	Description	Example
::before	Generated First Child	Creates a pseudo-element as the first child of the selected element.	.note::before { content: "Tip"; }
::after	Generated Last Child	Creates a pseudo-element as the last child of the selected element.	a.external::after { content: " ↗"; }
::marker	List Marker	Styles a list item's marker.	li::marker { color: #8bcc45; }
::placeholder	Placeholder Text	Styles placeholder text in supported form controls.	input::placeholder { color: #526168; }
::selection	Selected Text	Styles user-selected text.	::selection { background: #baf553; color: #11191d; }
::first-letter	First Letter	Styles the first typographic letter of a block.	article p:first-of-type::first-letter { font-size: 2em; }