CSS Selectors Cheat Sheet

Quick reference table of all major CSS selectors — basic combinators, attribute selectors, pseudo-classes, and pseudo-elements.

Selector	Example	Description
.class	.intro	Selects all elements with class="intro"
.class1.class2	.name1.name2	Selects elements that have both name1 and name2 in their class attribute
.class1 .class2	.name1 .name2	Selects elements with class name2 that are descendants of elements with class name1
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element.class	p.intro	Selects all <p> elements with class="intro"
element,element	div, p	Selects all <div> and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements (descendant)
element > element	div > p	Selects all <p> elements whose direct parent is a <div> (child combinator)
element + element	div + p	Selects the first <p> element placed immediately after a <div> (adjacent sibling)
element1 ~ element2	p ~ ul	Selects every <ul> element preceded by a <p> element (general sibling combinator)
[attribute]	[target]	Selects all elements that have a target attribute
[attribute=value]	[target="_blank"]	Selects elements with target="_blank"
[attribute~=value]	[title~="flower"]	Selects elements whose title attribute contains the word "flower"
[attribute|=value]	[lang|="en"]	Selects elements with lang equal to "en" or starting with "en-" (e.g. "en-US")
[attribute^=value]	a[href^="https"]	Selects <a> elements whose href begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects <a> elements whose href ends with ".pdf"
[attribute*=value]	a[href*="w3schools"]	Selects <a> elements whose href contains the substring "w3schools"
:active	a:active	Selects the link being clicked (active state)
::after	p::after	Inserts content after the content of each <p> element
::before	p::before	Inserts content before the content of each <p> element
:checked	input:checked	Selects every checked <input> (checkbox/radio)
:default	input:default	Selects the default form element (e.g. default submit button)
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects <p> elements that have no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> that is the first <p> of its parent
:focus	input:focus	Selects the <input> element that currently has focus
:fullscreen	:fullscreen	Selects the element currently in full-screen mode
:has()	h2:has(+ p)	Selects <h2> elements that have a <p> immediately after them
:hover	a:hover	Selects links when the mouse is over them
:in-range	input:in-range	Selects <input> elements with value within a specified range
:indeterminate	input:indeterminate	Selects <input> elements in an indeterminate state (e.g. progress bar, checkbox group)
:invalid	input:invalid	Selects <input> elements with an invalid value
:lang()	p:lang(it)	Selects <p> elements with lang="it" (Italian)
:last-child	p:last-child	Selects every <p> that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> that is the last <p> of its parent
:link	a:link	Selects all unvisited links
::marker	::marker	Selects the markers (bullets/numbers) of list items
:not()	:not(p)	Selects every element that is not a <p>
:nth-child()	p:nth-child(2)	Selects every <p> that is the 2nd child of its parent
:nth-last-child()	p:nth-last-child(2)	Selects every <p> that is the 2nd child counting from the end
:nth-last-of-type()	p:nth-last-of-type(2)	Selects every <p> that is the 2nd <p> counting from the end
:nth-of-type()	p:nth-of-type(2)	Selects every <p> that is the 2nd <p> of its parent
:only-of-type	p:only-of-type	Selects <p> elements that are the only <p> of their parent
:only-child	p:only-child	Selects <p> elements that are the only child of their parent
:optional	input:optional	Selects <input> elements with no required attribute
:out-of-range	input:out-of-range	Selects <input> elements with value outside a specified range
::placeholder	input::placeholder	Styles the placeholder text of <input> and <textarea>
:read-only	input:read-only	Selects <input> elements with the readonly attribute
:read-write	input:read-write	Selects <input> elements without the readonly attribute
:required	input:required	Selects <input> elements with the required attribute
:root	:root	Selects the document's root element (<html>)
::selection	::selection	Styles the portion of an element selected by the user
:target	#news:target	Selects the element whose ID matches the current URL fragment (anchor target)
:valid	input:valid	Selects <input> elements with a valid value
:visited	a:visited	Selects all visited links