Skip to main content

CSS Extraction

CSS extraction returns only the data you ask for, so you skip downloading and parsing entire pages. Just add a css_selectors map to any request — no special output_format needed. Results come back in data.css_extracted.

Basic mapping​

Each key in css_selectors becomes a key in data.css_extracted. The value is a CSS selector; we return the text content of the first matching element.

{
  "url": "https://shop.example.com/p/1",
  "css_selectors": {
    "title": "h1.product-title",
    "price": ".price-amount",
    "rating": ".rating .value"
  }
}
{
  "data": {
    "css_extracted": {
      "title": "Wireless Headphones X200",
      "price": "$129.00",
      "rating": "4.6"
    }
  }
}

Extracting lists​

When a selector matches multiple elements (e.g. every card on a listing page), all matches are returned as an array.

{
  "url": "https://shop.example.com/category/audio",
  "css_selectors": {
    "titles": ".card h2",
    "prices": ".card .price"
  }
}
{
  "data": {
    "css_extracted": {
      "titles": ["Headphones X200", "Earbuds Mini", "Speaker Pro"],
      "prices": ["$129.00", "$59.00", "$199.00"]
    }
  }
}

Extracting attributes​

To get an attribute instead of text, append @attr to the selector.

{
  "css_selectors": {
    "image": "img.hero@src",
    "link": "a.detail@href"
  }
}

Tips for reliable selectors​

  • Prefer stable class names or data-* attributes over deep positional selectors like div > div:nth-child(3).
  • For client-rendered pages, pair extraction with js_wait_selector so the element exists before we read it.
  • Test selectors in your browser's DevTools console with document.querySelectorAll('your-selector') first.

When to use autoparse instead​

If you just want "the obvious data" from a product or article page and don't want to write selectors, try output_format: "autoparse" (see Output formats). Use css_selectors when you need exact, predictable keys.