CSS

CSS Selectors Cheatsheet

Quick reference for CSS selectors including element, class, ID, attribute, pseudo-class, pseudo-element, and combinator selectors.

Basic Selectors

Selector	Example	Description
`*`	`*`	Universal: all elements
`element`	`p`	Type: all `<p>` elements
`.class`	`.card`	Class: elements with class “card”
`#id`	`#header`	ID: element with id “header”
`selector, selector`	`h1, h2`	Grouping: matches either

Combinator Selectors

Selector	Example	Description
`A B`	`div p`	Descendant: `p` inside `div` (any depth)
`A > B`	`div > p`	Child: direct `p` children of `div`
`A + B`	`h2 + p`	Adjacent sibling: `p` immediately after `h2`
`A ~ B`	`h2 ~ p`	General sibling: all `p` after `h2` at same level

Attribute Selectors

Selector	Description
`[attr]`	Has attribute
`[attr="val"]`	Attribute equals “val”
`[attr~="val"]`	Attribute contains word “val” (space-separated)
`[attr\|="val"]`	Attribute equals “val” or starts with “val-”
`[attr^="val"]`	Attribute starts with “val”
`[attr$="val"]`	Attribute ends with “val”
`[attr*="val"]`	Attribute contains “val”
`[attr="val" i]`	Case-insensitive match

Pseudo-Classes: State

Selector	Description
`:hover`	Mouse over element
`:active`	Element being activated (clicked)
`:focus`	Element has focus
`:focus-visible`	Focus via keyboard navigation
`:focus-within`	Element or descendant has focus
`:visited`	Visited link
`:link`	Unvisited link
`:target`	Element targeted by URL fragment
`:checked`	Checked input/option
`:disabled`	Disabled form element
`:enabled`	Enabled form element
`:required`	Required form field
`:optional`	Optional form field
`:valid`	Valid form input
`:invalid`	Invalid form input
`:placeholder-shown`	Input showing placeholder

Pseudo-Classes: Structural

Selector	Description
`:first-child`	First child of parent
`:last-child`	Last child of parent
`:nth-child(n)`	Nth child (1-indexed)
`:nth-last-child(n)`	Nth child from end
`:only-child`	Element with no siblings
`:first-of-type`	First of its type in parent
`:last-of-type`	Last of its type in parent
`:nth-of-type(n)`	Nth of its type
`:nth-last-of-type(n)`	Nth of type from end
`:only-of-type`	Only element of its type
`:empty`	Element with no children
`:root`	Document root (`<html>`)

nth-child Formulas

Pattern	Matches
`:nth-child(3)`	3rd child
`:nth-child(odd)`	1st, 3rd, 5th…
`:nth-child(even)`	2nd, 4th, 6th…
`:nth-child(2n)`	Even children
`:nth-child(2n+1)`	Odd children
`:nth-child(3n)`	Every 3rd child
`:nth-child(n+4)`	4th and beyond
`:nth-child(-n+3)`	First 3 children
`:nth-child(n+2):nth-child(-n+5)`	Children 2 through 5

Pseudo-Classes: Other

Selector	Description
`:not(selector)`	Negation
`:is(selector)`	Matches any in list (forgiving)
`:where(selector)`	Same as `:is()` but zero specificity
`:has(selector)`	Parent selector (contains match)

Pseudo-Elements

Selector	Description
`::before`	Insert content before element
`::after`	Insert content after element
`::first-line`	First line of text
`::first-letter`	First letter of text
`::placeholder`	Placeholder text in inputs
`::selection`	User-selected text
`::marker`	List item marker

Specificity (low to high)

Level	Example	Specificity
Universal	`*`	0-0-0
Element/pseudo-element	`p`, `::before`	0-0-1
Class/attribute/pseudo-class	`.card`, `[type]`, `:hover`	0-1-0
ID	`#header`	1-0-0
Inline style	`style="..."`	1-0-0-0
`!important`	—	Overrides all