CSS selector
A CSS selector is a pattern that matches HTML elements by tag name, class, id, attribute or position. Browsers use selectors to apply styles. DOM methods such as querySelectorAll use the same syntax to find elements in a page. When the data you need exists only in a page's HTML, a selector is how you reach it.
How CSS selectors work
A selector like h2.title matches every h2 element with the class title. a[href] matches links that have an href attribute. li:nth-child(2) matches the second item in a list. Selectors can combine these parts, so a match can depend on the element's position in the document. The MDN reference lists the full syntax.
Why it matters for AI agents
Many pages do not expose their data as JSON. The data is in the markup, and selectors are the standard way to target it. An agent that reads a result list needs a selector for each field it wants.
Wield and CSS selectors
Wield recipes extract data with html and html_items steps. An html_items step returns one object per matched element. Each field has its own selector and can read an attribute with attr instead of the text. A selector of "" or :scope means the element itself. The max option limits how many items a step returns.
Selectors can stop matching when a site changes its markup. Wield checks public read recipes that can run from a server every day. A failing recipe is marked degraded, and wield-mcp falls back to the last good version.
Related terms
FAQ
CSS selector vs XPath?
XPath is a separate query language that can also select elements, and its syntax is different. Selectors are not interchangeable between the two. This page covers CSS selectors only.
Why do selectors break?
A selector matches the markup it was written against. When a site renames a class, changes the nesting or restructures a list, the selector may match nothing. Wield's daily health checks mark a failing public read recipe as degraded.
Sources
- CSS selectors (MDN)developer.mozilla.org