What Are CSS Selectors?
CSS selectors are patterns used to select and target HTML elements on a web page. They are a fundamental part of Cascading Style Sheets, but their usefulness extends far beyond styling. In web scraping, DOM manipulation with JavaScript, and automated testing, CSS selectors provide a concise and powerful way to pinpoint exactly the elements you need. Whether you are extracting product prices from an e-commerce site or writing end-to-end tests with a tool like Playwright, understanding CSS selectors is essential.
A CSS selector can be as simple as an element name like p or as complex as a chained combination of pseudo-classes and attribute filters. The ability to test selectors against real HTML before embedding them in code saves significant debugging time and helps you write more precise, reliable queries.
Types of CSS Selectors
Class and ID Selectors
The most commonly used selectors target elements by their class or ID attribute. A class selector is prefixed with a dot, and an ID selector is prefixed with a hash. Classes can be shared across multiple elements, while IDs are meant to be unique within a page.
.product-title { color: #333; }
#main-header { font-size: 24px; }Attribute Selectors
Attribute selectors let you match elements based on the presence or value of HTML attributes. This is particularly useful for scraping when elements lack meaningful class names but have data attributes or specific href patterns.
/* Matches any link whose href starts with "https" */
a[href^="https"] { color: green; }
/* Matches inputs of type email */
input[type="email"] { border: 1px solid blue; }
/* Matches elements with a data-testid attribute */
[data-testid="submit-btn"] { cursor: pointer; }Pseudo-Class Selectors
Pseudo-classes select elements based on their state or position within the DOM tree. Common examples include :first-child, :last-child, :nth-child(n), and :not(). These are invaluable for targeting specific items in a list or table without needing unique class names.
/* Select every other table row */
tr:nth-child(even) { background: #f9f9f9; }
/* Select the first list item */
li:first-child { font-weight: bold; }
/* Select all divs except the header */
div:not(.header) { margin-top: 10px; }Combinators
Combinators define the relationship between selectors. The descendant combinator (a space) matches any nested element. The child combinator (>) matches only direct children. The adjacent sibling combinator (+) matches the element immediately following another, and the general sibling combinator (~) matches all subsequent siblings.
/* Direct child paragraphs of .article */
.article > p { line-height: 1.8; }
/* The first sibling after h2 */
h2 + p { font-size: 18px; }
/* All paragraphs that are siblings of h2 */
h2 ~ p { color: #555; }Understanding CSS Specificity
Specificity determines which CSS rule takes precedence when multiple rules target the same element. It is calculated as a tuple of three values: the number of ID selectors, the number of class, attribute, and pseudo-class selectors, and the number of element and pseudo-element selectors. An inline style always wins unless overridden by !important.
For example, #nav .link has a specificity of (1, 1, 0), which beats .nav .link at (0, 2, 0) because ID selectors carry more weight. Understanding specificity helps you write selectors that reliably match your target elements without unexpected overrides.
CSS Selectors for Web Scraping
When building web scrapers, CSS selectors are one of the primary methods for extracting data from HTML documents. Libraries like Cheerio (Node.js), Beautiful Soup (Python), and browser-native document.querySelectorAll all accept CSS selector strings. The key to reliable scraping is writing selectors that are specific enough to target the right elements but resilient enough to survive minor page layout changes.
// Node.js with Cheerio
const cheerio = require("cheerio");
const $ = cheerio.load(html);
// Extract all product names
const names = $(".product-card > h3.title")
.map((i, el) => $(el).text())
.get();
// Extract links from the navigation
const links = $("nav a[href^='/category/']")
.map((i, el) => $(el).attr("href"))
.get();Testing your selectors against the actual HTML before writing scraper code ensures you target the correct elements and handle edge cases. PulpMiner's CSS Selector Tester lets you paste any HTML and run selectors against it interactively.
How to Use the CSS Selector Tester
Open the CSS Selector Tester and follow these steps:
- Paste your HTML into the HTML input panel. This can be raw HTML from any webpage or a snippet you are working with.
- Enter a CSS selector in the selector input field. Use any valid CSS selector syntax.
- View matched elements — the tool highlights all elements that match your selector and shows the count of matches.
- Refine your selector until it matches exactly the elements you need. Experiment with different combinators and pseudo-classes.
The tool runs entirely in your browser, so your HTML data stays private. It supports all standard CSS selector syntax including pseudo-classes, attribute selectors, and complex combinators.
Ready to test your selectors? Open CSS Selector Tester