CSS Selector

How a CSS selector works

Browsers and parsers turn HTML into a document object model (DOM). A selector is tested against that tree, and each matching element can be read, clicked or styled. In browser JavaScript, querySelector() returns the first match while querySelectorAll() returns every match.

Common patterns include:

• Type: h2 matches every <h2> element.
• Class: .product matches elements with that class.
• ID: #results matches the element with that ID.
• Attribute: [data-price] matches elements carrying that attribute.
• Relationship: article.product > h2 matches direct child headings.

Using selectors in a scraper

In web scraping, selectors identify the elements whose text or attributes you want to extract:

const products = [...document.querySelectorAll("article.product")].map(card => ({
  name: card.querySelector("h2").textContent.trim(),
  price: card.querySelector("[data-price]").textContent.trim()
}));

This finds each product card, then reads its heading and price. Tools such as Beautiful Soup and Playwright provide methods that accept CSS selectors.

A static HTML parser can’t select content that JavaScript adds later. If the element appears in browser developer tools but not in the downloaded HTML, you may need JavaScript rendering or the page’s underlying data endpoint.

CSS selectors vs XPath

CSS selectors and XPath both locate elements, but their strengths differ.

CSS is often easier for class and attribute matching. XPath is useful when selection depends on text or explicit ancestor traversal.

Writing reliable selectors

• Prefer stable data-* attributes, semantic classes or unique IDs.
• Scope matches under a stable container instead of searching the whole page.
• Avoid generated class names and long :nth-child() chains.
• Check for zero or multiple matches so layout changes don’t silently corrupt your data.

Selectors run after the page is fetched. A proxy changes the IP address the website sees, but it doesn’t repair an outdated selector or render missing content.

FAQ

Are CSS selectors only used for styling?

No. CSS uses them for styling, but browsers, testing tools and scrapers also use them to locate HTML elements.

Why does my CSS selector work in the browser but not in my scraper?

Usually, developer tools show a DOM changed by JavaScript while your scraper sees only the original HTML. Render the page in a browser or inspect where the page loads its data.

Can a CSS selector match an element by its text?

No, not with standard CSS alone. Select candidate elements and filter their text afterward, or use XPath if your tool supports it.