How to Use CSS Selector Extraction

What is it?

CSS Selector extraction lets you point at HTML elements using the same selectors you write in stylesheets - class names, IDs, element types, attribute values, and combinators. Verid grabs the text content of the matching element and stores it as a named field you can track over time.

It's the right first choice for most websites. If a page has meaningful class names and the data you want lives in a predictable element, CSS selectors will work reliably and be easy to maintain.

When to use it

• Tracking a price, heading, stock badge, or any visible text on a page
• The site uses semantic class names like .price, .version, .stock-status
• You're comfortable with browser DevTools (or willing to copy a selector with one click)

---

How to configure it

Pick CSS Selector as your extraction method, then add one or more named fields. Each field maps a name to a selector:

{
  "method": "css",
  "fields": {
    "price": ".current-price",
    "availability": ".stock-status"
  }
}

When a selector matches multiple elements, Verid returns the text of the first match. If no element matches, the field is omitted from the output.

Finding selectors in DevTools

1. Right-click the element you want on the page
2. Choose Inspect
3. Right-click the highlighted node in the Elements panel
4. Choose Copy → Copy selector

The browser-generated selector is usually very specific - feel free to simplify it.

---

Example 1 - Track a product price

Goal: Get alerted when a laptop's price drops on an online store.

Page HTML (simplified):

<div class="product-summary">
  <h1 class="product-title">MacBook Pro 14"</h1>
  <span class="price current-price">$1,999.00</span>
  <span class="stock-status in-stock">In Stock</span>
</div>

Configuration:

{
  "method": "css",
  "fields": {
    "price": ".current-price",
    "title": ".product-title",
    "availability": ".stock-status"
  }
}

Output:

{
  "price": "$1,999.00",
  "title": "MacBook Pro 14\"",
  "availability": "In Stock"
}

Verid alerts you as soon as price or availability changes between runs.

---

Example 2 - Monitor an open job count

Goal: Know the moment a company posts new roles on their careers page.

Page HTML:

<div class="jobs-header">
  <h2>Open Roles <span class="count">(14)</span></h2>
</div>

Configuration:

{
  "method": "css",
  "fields": {
    "open_roles": ".jobs-header .count"
  }
}

Output:

{
  "open_roles": "(14)"
}

When a new role is posted and the page updates to (15), you get a notification.

---

Example 3 - Track a library version badge

Goal: Get notified when a package publishes a new release on its documentation site.

Page HTML:

<aside class="sidebar">
  <span class="version-badge">v4.2.1</span>
</aside>

Configuration:

{
  "method": "css",
  "fields": {
    "version": ".version-badge"
  }
}

Output:

{
  "version": "v4.2.1"
}

---

Example 4 - Watch a stats table leader

Goal: Track the top team in a standings table.

Page HTML:

<table class="standings">
  <tbody>
    <tr class="rank-1">
      <td class="team">Golden State Warriors</td>
      <td class="wins">42</td>
      <td class="losses">18</td>
    </tr>
  </tbody>
</table>

Configuration:

{
  "method": "css",
  "fields": {
    "leader": ".standings .rank-1 .team",
    "wins": ".standings .rank-1 .wins",
    "losses": ".standings .rank-1 .losses"
  }
}

Output:

{
  "leader": "Golden State Warriors",
  "wins": "42",
  "losses": "18"
}

---

Tips

• Namespace your selectors. Use .product-card .price instead of just .price when multiple prices appear on the page.
• Prefer class or ID selectors over bare tag selectors (span, div) - tag-only selectors break when the page adds more elements.
• Simplify copied selectors. DevTools often generates div > main > section:nth-child(2) > span.price when .price is enough.
• JavaScript-rendered content. If the element only appears after JS runs, the selector will return nothing. Use the AI (LLM) method instead, or check if the data is available in a JSON API endpoint.

Common issues