Selectors

Reference

Read The Cascade from Web.dev

Selectors  |  web.devweb.dev

---

Basic selectors:

• Element selector (p) targets all paragraphs

• Class selector (.classname) targets elements with that class

• ID selector (#idname) targets the unique element with that ID

• Universal selector (*) targets all elements

Combinators:

• Descendant (div p) targets paragraphs inside divs

• Child (div > p) targets direct children only

• Adjacent sibling (h1 + p) targets the first paragraph immediately after an h1

• General sibling (h1 ~ p) targets all following sibling paragraphs

Attribute selectors:

• [attribute] targets elements with that attribute

• [attribute="value"] targets exact matches

• [attribute^="value"] starts with

• [attribute$="value"] ends with

• [attribute*="value"] contains

Pseudo-classes target elements in specific states:

• :hover, :focus, :active for user interactions

• :first-child, :last-child, :nth-child(n) for position

• :not() for exclusions

Pseudo-elements style parts of elements:

• ::before, ::after for generated content

• ::first-line, ::first-letter for text styling

---