CSS Selectors Reference

Complete reference for CSS selectors — combinators, pseudo-classes, pseudo-elements, and specificity.

CSS selectors target HTML elements for styling. Understanding selectors and specificity is essential for writing maintainable stylesheets.

Basic Selectors

Selector	Example	Description
Type	`div`	All elements of that type
Class	`.card`	Elements with that class
ID	`#main`	The unique element with that ID
Universal	`*`	All elements
Attribute	`[type="text"]`	Elements matching the attribute
Grouping	`h1, h2, h3`	Multiple selectors at once

Combinators

Combinator	Syntax	Description
Descendant	`article p`	Any `p` inside `article` at any depth
Child	`article > p`	Direct child `p` of `article`
Adjacent sibling	`h2 + p`	`p` immediately after `h2`
General sibling	`h2 ~ p`	Any `p` after `h2` in the same parent
Column	`col

Attribute Selectors

Pattern	Example	Matches
`[attr]`	`[disabled]`	Has the attribute
`[attr=val]`	`[type="text"]`	Exact match
`[attr~=val]`	`[class~="active"]`	Space-separated list contains val
`[attr^=val]`	`[href^="https"]`	Starts with val
`[attr$=val]`	`[src$=".png"]`	Ends with val
`[attr*=val]`	`[href*="example"]`	Contains val anywhere
`[attr	=val]`	`[lang

Pseudo-Classes

Interactive

Pseudo-class	Description
`:hover`	Cursor is over the element
`:active`	Element is being activated (clicked)
`:focus`	Element has focus
`:focus-visible`	Element has focus via keyboard
`:focus-within`	Element or a descendant has focus

Structural

Pseudo-class	Description
`:first-child`	First child of its parent
`:last-child`	Last child of its parent
`:only-child`	Only child of its parent
`:nth-child(n)`	nth child (accepts `2n+1`, `odd`, `even`)
`:nth-last-child(n)`	nth child from the end
`:first-of-type`	First sibling of its type
`:last-of-type`	Last sibling of its type
`:nth-of-type(n)`	nth sibling of its type
`:empty`	No children or text

Input

Pseudo-class	Description
`:checked`	Checked checkbox or radio
`:disabled`	Disabled input
`:enabled`	Enabled input
`:required`	Required input
`:optional`	Not required
`:valid`	Passes validation
`:invalid`	Fails validation
`:in-range`	Value within min/max
`:out-of-range`	Value outside min/max

Negation and Matching

Pseudo-class	Description
`:not(selector)`	Does not match selector
`:is(selector)`	Matches any in the list (0-specificity for arguments)
`:where(selector)`	Like `:is` but 0-specificity
`:has(selector)`	Has a descendant matching selector

Pseudo-Elements

Pseudo-element	Description
`::before`	Insert content before the element
`::after`	Insert content after the element
`::first-line`	First line of text
`::first-letter`	First letter of text
`::selection`	Text selected by the user
`::placeholder`	Input placeholder text

/* Example: custom bullet */
li::before {
  content: "→ ";
  color: tomato;
}

/* Example: selection color */
p::selection {
  background: #4a90d9;
  color: white;
}

Specificity

Specificity determines which rule wins when multiple rules target the same element.

Specificity	Example	Weight
Inline styles	`style="..."`	1,0,0,0
ID	`#main`	0,1,0,0
Class, attribute, pseudo-class	`.card`, `[type]`, `:hover`	0,0,1,0
Type, pseudo-element	`div`, `::before`	0,0,0,1
Universal	`*`	0,0,0,0

/* Specificity: 0,0,1,1 */
p.intro { color: blue; }

/* Specificity: 0,1,0,0 — wins */
#main { color: red; }

/* Specificity: 0,0,1,0 — loses */
.intro { color: green; }

/* !important overrides everything (avoid if possible) */
.intro { color: green !important; }