Selector Basics

What Are CSS Selectors?

CSS selectors are patterns used to identify HTML elements on a web page. ET59 uses them to know exactly which data to extract.

Common Selector Types

By Tag

• `h1` — selects all `<h1>` elements
• `p` — selects all paragraphs
• `a` — selects all links

By Class

• `.title` — selects elements with `class="title"`
• `.product-card` — selects elements with `class="product-card"`

By ID

• `#main-content` — selects the element with `id="main-content"`

Combined

• `div.article h1` — selects `<h1>` inside a `<div class="article">`
• `ul.results > li a` — selects links inside list items of `<ul class="results">`

How to Find Selectors

1. Open the target page in your browser
2. Right-click the element you want → **Inspect**
3. Look at the element's tag, class, and ID in the developer tools
4. Build a selector that uniquely identifies that element

Tips

• Be as specific as possible to avoid extracting unwanted data
• Test your selector in the browser console: `document.querySelectorAll('your-selector')`
• ET59's test scrape feature lets you preview results before running