❤ Like

🔖 Save

🔗 Share

Eric Hu

CSS Selectors

Basic selectors

Selector	Meaning	Example
`*`	Universal selector	`* { ... }`
`E`	Type selector`	`p { ... }`
`.class`	Class selector	`.btn { ... }`
`#id`	ID selector	`#nav { ... }`
`[attr]`	Attribute presence	`a[target] { ... }`

Combinators

Selector	Relationship	Example
`A B`	Descendant. `B` inside `A`	`article p { ... }`
`A > B`	Direct child	`ul > li { ... }`
`A + B`	Adjacent sibling. `B` immediately after `A`	`h2 + p { ... }`
`A ~ B`	General sibling. `B` after `A`	`h2 ~ p { ... }`

Attribute selectors

Selector	Meaning	Example
`[attr]`	Has attribute	`img[alt] { ... }`
`[attr=value]`	Exact match	`a[rel="external"] { ... }`
`[attr~=value]`	Word contains	`[class~="lead"] { ... }`
`[attr^=value]`	Starts with	`a[href^="https"] { ... }`
`[attr$=value]`	Ends with	`img[src$=".svg"] { ... }`
`[attr*=value]`	Contains substring	`[data-id*="post-"] { ... }`

Pseudo-classes (state and structural)

Selector	Meaning	Example
`:hover`	On hover	`button:hover { ... }`
`:focus`	Element has focus	`input:focus { ... }`
`:active`	Activated by user	`a:active { ... }`
`:first-child`	First child of parent	`li:first-child { ... }`
`:last-child`	Last child of parent	`li:last-child { ... }`
`:nth-child(n)`	Select by index (1-based)	`tr:nth-child(odd) { ... }`
`:nth-of-type(n)`	Index among type	`p:nth-of-type(2) { ... }`
`:not(selector)`	Negation	`:not(.muted) { ... }`
`:disabled`, `:checked`	Form states	`input:checked + label { ... }`

Pseudo-elements

Selector	Meaning	Example
`::before`	Insert content before element	`.btn::before { ... }`
`::after`	Insert content after element	`.note::after { ... }`
`::first-letter`	First letter styling	`p::first-letter { ... }`
`::first-line`	First line styling	`p::first-line { ... }`
`::selection`	Selected text	`::selection { ... }`

Grouping & shorthand

Selector	Meaning
`A, B`	Group selectors. Apply same rules to both
`E:not(:first-child)`	Combine structural and negation

Selector functions

Common functional pseudo-classes and selector helpers.

Function	Meaning / notes
`:not(X)`	Select elements that do NOT match `X`.
`:is(X)`	Matches if element matches any selector in list `X`.
`:where(X)`	Like `:is()` but with zero specificity.
`:has(X)`	Parent selector: matches an element if it contains a descendant matching `X`.
`:matches()`	Legacy alias for `:is()`. Prefer `:is()`.
`:nth-child(an+b)`	Structural numeric selector. Supports formulas like `2n`, `odd`, `even`, etc.
`:nth-last-child(an+b)`	Like `:nth-child()` but counting from the end.
`:nth-of-type(an+b)`	Index among siblings of the same element type.
`:nth-last-of-type(an+b)`	Like `:nth-of-type()` counting from the end.
`:lang(language)`	Matches elements with the given language (matches `lang` attribute).

Selector

Meaning

Example

*

Universal selector

* { ... }

E

Type selector`

p { ... }

.class

Class selector

.btn { ... }

#id

ID selector

#nav { ... }

[attr]

Attribute presence

a[target] { ... }

Selector

Relationship

Example

A B

Descendant. B inside A

article p { ... }

A > B

Direct child

ul > li { ... }

A + B

Adjacent sibling. B immediately after A

h2 + p { ... }

A ~ B

General sibling. B after A

h2 ~ p { ... }

Attribute selectors

Selector

Meaning

Example

[attr]

Has attribute

img[alt] { ... }

[attr=value]

Exact match

a[rel="external"] { ... }

[attr~=value]

Word contains

[class~="lead"] { ... }

[attr^=value]

Starts with

a[href^="https"] { ... }

[attr$=value]

Ends with

img[src$=".svg"] { ... }

[attr*=value]

Contains substring

[data-id*="post-"] { ... }

Pseudo-classes (state and structural)

Selector

Meaning

Example

:hover

On hover

button:hover { ... }

:focus

Element has focus

input:focus { ... }

:active

Activated by user

a:active { ... }

:first-child

First child of parent

li:first-child { ... }

:last-child

Last child of parent

li:last-child { ... }

:nth-child(n)

Select by index (1-based)

tr:nth-child(odd) { ... }

:nth-of-type(n)

Index among type

p:nth-of-type(2) { ... }

:not(selector)

Negation

:not(.muted) { ... }

:disabled, :checked

Form states

input:checked + label { ... }

Selector

Meaning

Example

::before

Insert content before element

.btn::before { ... }

::after

Insert content after element

.note::after { ... }

::first-letter

First letter styling

p::first-letter { ... }

::first-line

First line styling

p::first-line { ... }

::selection

Selected text

::selection { ... }

Selector

Meaning

A, B

Group selectors. Apply same rules to both

E:not(:first-child)

Combine structural and negation

Selector functions

Common functional pseudo-classes and selector helpers.

Function

Meaning / notes

:not(X)

Select elements that do NOT match X.

:is(X)

Matches if element matches any selector in list X.

:where(X)

Like :is() but with zero specificity.

:has(X)

Parent selector: matches an element if it contains a descendant matching X.

:matches()

Legacy alias for :is(). Prefer :is().

:nth-child(an+b)

Structural numeric selector. Supports formulas like 2n, odd, even, etc.

:nth-last-child(an+b)

Like :nth-child() but counting from the end.

:nth-of-type(an+b)

Index among siblings of the same element type.

:nth-last-of-type(an+b)

Like :nth-of-type() counting from the end.

:lang(language)

Matches elements with the given language (matches lang attribute).

CSS Selectors

Basic selectors

Combinators

Attribute selectors

Pseudo-classes (state and structural)

Pseudo-elements

Grouping & shorthand

Selector functions

Full-Stack AI Developer Roadmap

CSS Selectors

Basic selectors

Combinators

Attribute selectors

Pseudo-classes (state and structural)

Pseudo-elements

Grouping & shorthand

Selector functions

Full-Stack AI Developer Roadmap