What are CSS Selectors?

CSS Selectors are patterns used to select the HTML elements you want to style or, in the case of web scraping and auditing, the elements you want to extract data from.

Common CSS Selectors

• Element Selector: Selects all elements of a given type. Example: p selects all <p> elements.
• Class Selector: Selects elements with a specific class attribute, prefixed with a dot. Example: .price selects <div class="price">.
• ID Selector: Selects a single element with a specific ID, prefixed with a hash. Example: #main-content selects <div id="main-content">.
• Attribute Selector: Selects elements based on the presence or value of an attribute. Example: [data-sku] selects elements with the data-sku attribute.
• Combinators: Selects elements based on their relationship. Example: article > h1 selects <h1> elements that are direct children of <article>.

Why they are useful for SEO auditing

When running technical SEO audits, you often need to check specific elements unique to your site's structure—such as out-of-stock badges, author names, publish dates, or custom SKU fields. Using CSS selectors allows you to programmatically extract this data across thousands of pages during a crawl.

Custom Extraction in BearAudit

BearAudit allows you to configure Custom Extractors for any property. By defining a CSS selector, BearAudit will pull the matching text or HTML from every page it crawls. This data is then available in the Page Viewer and included in CSV exports, making it easy to audit custom content at scale without needing developer assistance.

Further reading

• MDN Web Docs: CSS Selectors