CSS Selector Guide

CSS selectors are patterns used to select and style HTML elements. Understanding selectors is essential for web development, web scraping, automated testing, and DOM manipulation. Whether you're writing styles, using querySelector in JavaScript, or extracting data, mastering CSS selectors is a fundamental skill. This tool helps you test and validate your selectors against real HTML markup.

Basic Selectors

Selector	Description	Example	Matches
*	Universal selector	*	All elements
element	Type selector	div	All <div> elements
.class	Class selector	.button	Elements with class="button"
#id	ID selector	#header	Element with id="header"
[attr]	Attribute selector	[disabled]	Elements with disabled attribute

Combinators

Combinator	Name	Example	Selects
A B	Descendant	div p	All <p> inside <div> (at any level)
A > B	Child	div > p	<p> that are direct children of <div>
A + B	Adjacent sibling	h1 + p	<p> immediately after <h1>
A ~ B	General sibling	h1 ~ p	All <p> that follow <h1>

Attribute Selectors

Selector	Description	Example
[attr=value]	Exact match	[type="text"]
[attr^=value]	Starts with	[href^="https"]
[attr$=value]	Ends with	[href$=".pdf"]
[attr*=value]	Contains	[class*="btn"]
[attr~=value]	Contains word	[class~="active"]
[attr|=value]	Starts with value or value-	[lang|="en"]

Pseudo-Classes

Structural Pseudo-Classes

• :first-child - First child of its parent
• :last-child - Last child of its parent
• :nth-child(n) - Nth child of its parent
• :nth-of-type(n) - Nth element of its type
• :only-child - Only child of its parent
• :empty - Elements with no children

State Pseudo-Classes

• :hover - Mouse pointer over element
• :focus - Element has focus
• :active - Element being activated
• :disabled - Disabled form elements
• :checked - Checked checkboxes/radios
• :not(selector) - Elements not matching selector

Practical Examples

Common Patterns

/* All links in navigation */
nav a

/* Direct child paragraphs of articles */
article > p

/* First paragraph after any heading */
h1 + p, h2 + p, h3 + p

/* All elements with data-active attribute */
[data-active]

/* Links to external sites (starting with http) */
a[href^="http"]

/* PDF download links */
a[href$=".pdf"]

/* Every other table row (zebra striping) */
tr:nth-child(even)

/* All inputs except submit buttons */
input:not([type="submit"])

/* Paragraphs that are first children */
p:first-child

Specificity

When multiple selectors target the same element, specificity determines which styles apply. Specificity is calculated as:

1. Inline styles: Highest specificity (1,0,0,0)
2. IDs: (0,1,0,0) per ID
3. Classes, attributes, pseudo-classes: (0,0,1,0) each
4. Elements, pseudo-elements: (0,0,0,1) each

Examples:

• #header = (0,1,0,0)
• .button = (0,0,1,0)
• div.button = (0,0,1,1)
• #nav .menu-item = (0,1,1,0)

Best Practices

1. Keep selectors simple: Overly specific selectors are hard to override and maintain
2. Avoid deep nesting: Long selector chains are fragile and slow
3. Use classes over IDs for styling: Classes are reusable and have lower specificity
4. Prefer direct children over descendants: > is more specific and performant than space
5. Be semantic: Use meaningful class names that describe purpose, not appearance
6. Avoid !important: It makes debugging and overriding styles difficult

Use Cases

1. Styling with CSS

The primary use of selectors - applying styles to elements matching specific patterns.

2. JavaScript Selection

// Select single element
const element = document.querySelector('.button');

// Select all matching elements
const elements = document.querySelectorAll('div > p');

3. Web Scraping

Extract data from HTML pages using selectors with tools like BeautifulSoup or Cheerio.

4. Automated Testing

Locate elements in test frameworks like Selenium, Playwright, or Cypress.

Common Mistakes

• Multiple classes without space: .btn.primary requires both classes, .btn .primary is descendant
• Forgetting specificity: More specific selectors override less specific ones
• Using IDs for repetitive styles: IDs should be unique; use classes instead
• Over-qualifying selectors: div.container is usually unnecessary, .container suffices