What Is a CSS Selector? – Definition and How It Works

Informational P1 what is a css selector

Learn what CSS selectors are, the syntax for classes, attributes, and combinators, how specificity works, and which selectors survive site changes.

A CSS selector is a pattern that matches elements in a document. Browsers use them to apply styles; automation and extraction code uses the same syntax to find elements to read or click.

1. What Is a CSS Selector?

It is a compact expression describing which elements to match.

Key idea: match on element type, attributes, and structural relationships.
Mechanism: a pattern evaluated against the parsed document tree.
Goal: address elements precisely without walking the tree by hand.

Example

div.product > h2            /* h2 that is a direct child of a product div */
a[href^="/item/"]           /* links whose href starts with /item/ */
tr:nth-child(odd) td:first-child   /* first cell of every odd row */

2. The Building Blocks

Pattern	Matches
`tag`	Every element of that type
`.class`	Elements carrying that class
`#id`	The element with that id
`[attr]`	Elements that have the attribute
`[attr="v"]`	Exact attribute value
`[attr^="v"]` `[attr$="v"]` `[attr*="v"]`	Starts with, ends with, contains
`*`	Any element

Attribute matching is the most useful family for extraction, because data-* attributes tend to outlive class names.

3. Combinators

A B — B anywhere inside A.
A > B — B as a direct child of A.
A + B — B immediately after A, same parent.
A ~ B — any B after A, same parent.

Direct-child and adjacent combinators are stricter and therefore break more loudly when markup changes, which is often preferable to matching the wrong element silently.

4. Useful Pseudo-Classes

:first-child, :last-child, :nth-child(n), :not(...), and :has(...) cover most structural needs. :has() is the notable recent addition, allowing a parent to be selected by what it contains — a capability that previously required XPath.

Note that :visible-style pseudo-classes are library extensions, not standard CSS, and are unavailable in plain document queries.

5. Specificity

When several rules match, specificity decides which wins: inline styles, then ids, then classes and attributes, then element types. Specificity matters for styling; for extraction it matters only in that a highly specific selector is usually more brittle.

6. Writing Selectors That Last

Prefer data-* attributes and stable ids over class names.
Treat hashed class names — long random-looking strings — as guaranteed to change.
Avoid deep chains of > from the document root; one inserted wrapper breaks them.
Anchor on a stable container, then use a short relative selector inside it.
Verify against several pages of the same template before trusting a selector.

7. CSS Selectors Versus XPath

CSS selectors are shorter, universally supported, and sufficient for most extraction. XPath adds two things CSS cannot do: matching on text content and traversing upward to an ancestor.

Reach for XPath when the only reliable anchor is a label's text, or when the target sits above the element you can identify. Use CSS everywhere else.

8. Summary

CSS selectors match elements by type, attribute, class, and structural relationship, using a syntax shared between styling and automation.

Durability comes from what the selector anchors to. Stable attributes survive redesigns; generated class names and long structural chains do not, which is why selector maintenance is most of the cost of running a scraper over time.