CSS selector
The pattern syntax invented for styling pages, borrowed by scrapers as the everyday way to select the elements worth extracting.
Selectors were invented so stylesheets could say which elements a rule paints, and scraping simply borrowed the language: the same pattern that styles every price tag can select every price tag. The vocabulary is compact. A bare name matches a tag, .price matches by class, #main by id, [data-sku] by attribute presence and [data-sku='X17'] by attribute value; a space between parts means descendant, a right angle bracket means direct child, and :nth-child() picks by position.
Ubiquity is the practical argument. Every parser, framework and browser API speaks this syntax, every developer already half-knows it from styling work, and for the overwhelming share of extraction, get the cards, the title inside each, the link's href, it is the shortest correct sentence. Scraping code written in it reads like the page structure it addresses.
The limits are structural, and knowing them saves the afternoon. Classic selectors point strictly downward: you select descendants of things, never parents of things, and they cannot see text at all, so the element containing the words Sold out is unreachable by its words. The :has() pseudo-class has begun changing the first limit in browsers, and support across scraping libraries is uneven enough that portable code still treats upward selection as XPath territory. Those two gaps, text and traversal, mark exactly where the other language starts earning its keep.
The modern trap is not the syntax but the classes themselves. Build tooling increasingly generates them: utility frameworks compose styling from dozens of tiny classes, and CSS-in-JS emits hashed names like css-1x2y3z that change on every deployment. A selector anchored to generated classes is anchored to a build artefact, and it rots on the site's next release with no visible layout change at all. Durable selectors anchor to what survives rebuilds: semantic tags, ids, aria attributes, and the data- attributes teams add precisely because their own tests need stable hooks.
So the craft, as with all pointing, is choosing anchors by meaning. A selector like [data-testid='price'] outlives one like div.sc-bZQynM span:nth-child(2) by years, and the difference was never cleverness, only choosing the part of the page its own developers promised not to shuffle.
Frequently asked questions
What CSS selectors should I know for scraping?
A working handful covers most extraction: tag, .class and #id for the basics, [attribute] and [attribute='value'] for the precise anchors, the space and the right angle bracket for descendant and child nesting, and :nth-child() for positional picks. That small set, composed, expresses nearly every everyday extraction; the exotic pseudo-classes rarely earn their keep in scraping code.
Why do my selectors break when the site has not changed?
Because the class names were build artefacts, not design. CSS-in-JS and utility pipelines generate hashed or composed class names that change on redeploy while the rendered layout stays identical, so a selector anchored to them dies invisibly. Re-anchor to stable hooks, ids, semantic structure, aria labels or data- attributes, and the same page stops shedding your selectors each release.
Can a CSS selector find an element by its text?
Not in the standard syntax; selectors see structure and attributes, not content. When the only reliable anchor is the visible words, that is the textbook case for an XPath text() match instead, or for selecting a broader set with CSS and filtering by text in your own code. Choosing per extraction beats loyalty to either language.
Are CSS selectors faster than XPath?
Marginally, sometimes, and almost never where your time goes. Modern engines evaluate both quickly, and network transfer, rendering and parsing dwarf selector evaluation in any real pipeline. Choose by capability and durability, whichever language lets you anchor to something the site will not shuffle, and let performance differences remain a curiosity.
Back to the full glossary.