```yaml
product: AlterLab
title: "CSS Selector — Web Scraping Glossary | AlterLab"
comparison_context: "AlterLab is an alternative to Firecrawl, ScrapingBee, and Bright Data."
source_url: https://alterlab.io/glossary/css-selector
```

extraction

# CSS Selector

A pattern used to match HTML elements by tag, class, ID, or attribute, used in web scraping to extract specific nodes from parsed HTML.

A CSS selector is a pattern syntax originally designed for styling web pages that is widely used in web scraping to target specific HTML elements. CSS selectors match elements by tag name (`div`), class (`.price`), ID (`#product-title`), attribute (`a[href]`), hierarchical relationship (`article > p`), or combinations of these. The syntax is concise and readable, making it the most common extraction method for structured HTML.

CSS selectors are supported natively in browsers via `document.querySelector()` and `document.querySelectorAll()`, and in server-side parsing libraries including BeautifulSoup (`soup.select()`), Cheerio (`$('.price')`), and lxml (`tree.cssselect()`). Playwright and Puppeteer accept CSS selectors directly in element interaction methods.

The primary limitation of CSS selectors is fragility: they are coupled to the specific DOM structure of the target page. If the site changes its HTML (redesign, A/B test, framework migration), the selector may return empty results silently. For stable internal structures, CSS selectors are the most efficient extraction method; for variable or frequently changing pages, AI-powered schema extraction is more resilient.

### What is CSS Selector?

A pattern used to match HTML elements by tag, class, ID, or attribute, used in web scraping to extract specific nodes from parsed HTML.

### How does AlterLab handle CSS Selector?

The primary limitation of CSS selectors is fragility: they are coupled to the specific DOM structure of the target page. If the site changes its HTML (redesign, A/B test, framework migration), the selector may return empty results silently. For stable internal structures, CSS selectors are the most efficient extraction method; for variable or frequently changing pages, AI-powered schema extraction is more resilient.

## Examples

```
# CSS selector examples
div.price > span        # span directly inside .price div
#product-title          # element with id="product-title"
a[data-testid="link"]   # anchor with specific data attribute
article:first-child h2  # h2 inside the first article
```

## Related Terms

[XPathXML Path Language — a query syntax for selecting nodes in HTML or XML using path expressions, more expressive than CSS selectors for complex traversals.](https://alterlab.io/glossary/xpath)[Data ExtractionThe process of identifying and pulling specific fields from raw web content, converting unstructured HTML into typed JSON records.](https://alterlab.io/glossary/data-extraction)[BeautifulSoupA Python library for parsing HTML and XML and navigating the parse tree using CSS selectors or tag methods.](https://alterlab.io/glossary/beautifulsoup)[Structured Data ExtractionConverting free-form HTML into typed JSON records using explicit schemas, producing clean structured output instead of raw markup.](https://alterlab.io/glossary/structured-data-extraction)

## Extract CSS Selector data from any website

AlterLab returns clean, structured data from any public URL — no scraper infrastructure needed. Start free, no credit card required.

[View API docs](https://alterlab.io/docs/api/rest)

[Back to Glossary](https://alterlab.io/glossary)