CSS Selectors: Complete Reference

Selectors are patterns used to select and target HTML elements. Mastering selectors means you can target any element precisely — whether in plain HTML or inside a complex WordPress theme.

1. Basic Selectors

Selector	Syntax	Description	Specificity
Universal	`*`	Every element on the page	0
Type / Element	`p`, `div`, `h1`	All elements of that tag	1
Class	`.card`, `.btn-primary`	Elements with that class	10
ID	`#hero`, `#main-nav`	The one element with that ID	100
Attribute	`[type="text"]`	Elements by attribute	10

* { box-sizing: border-box; }          /* Universal — resets everything */
p { line-height: 1.6; }                /* Element */
.card { border-radius: 8px; }          /* Class */
#hero { min-height: 100vh; }           /* ID (avoid for styling) */
input[required] { border-color: red; } /* Attribute */

2. Combinator Selectors

Combinators define the relationship between two selectors.

Combinator	Syntax	Selects	Example
Descendant	`A B`	Any `B` inside `A` (any depth)	`nav a`
Child	`A > B`	Direct `B` children of `A` only	`.menu > li`
Adjacent Sibling	`A + B`	`B` immediately after `A`	`h2 + p`
General Sibling	`A ~ B`	All `B` siblings after `A`	`h2 ~ p`

/* Descendant — targets ALL links inside nav, nested anywhere */
nav a { text-decoration: none; }

/* Child — ONLY direct li children, not nested lis */
.nav__list > li { display: inline-block; }

/* Adjacent sibling — the paragraph immediately after a heading */
h2 + p { font-size: 1.1rem; font-weight: 500; }

/* General sibling — all paragraphs after the first one */
p ~ p { margin-top: 1em; }

3. Attribute Selectors (Full Reference)

Selector	Matches	Example
`[attr]`	Has the attribute	`[disabled]`
`[attr="val"]`	Exact match	`[type="submit"]`
`[attr~="val"]`	Contains word (space-separated)	`[class~="card"]`
`[attr^="val"]`	Starts with value	`[href^="https"]`
`[attr$="val"]`	Ends with value	`[href$=".pdf"]`
`[attr*="val"]`	Contains substring	`[class*="icon-"]`
`[attr\|="val"]`	Equals val or starts with `val-`	`[lang\|="en"]`
`[attr="val" i]`	Case-insensitive match	`[type="EMAIL" i]`

/* Style all external links differently */
a[href^="http"]:not([href*="yourdomain.com"]) {
  color: var(--color-muted);
}
a[href^="http"]:not([href*="yourdomain.com"])::after {
  content: " ↗";
  font-size: 0.75em;
}

/* Style PDF download links */
a[href$=".pdf"]::before { content: "📄 "; }

/* Style all icon utility classes */
[class*="icon-"] { display: inline-flex; align-items: center; }

4. Grouping Selectors

Apply the same styles to multiple selectors:

/* Comma-separated list */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

/* Modern: use :is() to also take advantage of specificity pooling */
:is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); }

5. Selector Specificity Quick Reference

Specificity is calculated as (A, B, C):

A = ID selectors (#id)
B = Class, attribute, pseudo-class selectors (.class, [attr], :hover)
C = Element, pseudo-element selectors (div, ::before)

Selector                         | A  B  C  | Score
---------------------------------|----------|------
*                                | 0, 0, 0  | 0
p                                | 0, 0, 1  | 1
.card                            | 0, 1, 0  | 10
.card p                          | 0, 1, 1  | 11
#hero                            | 1, 0, 0  | 100
#hero .card p                    | 1, 1, 1  | 111

6. CSS Selector Performance Tips

Browsers match selectors right to left. The rightmost selector is the "key selector":

/* ❌ Slow — key selector is 'a', matches thousands of elements */
.main-content article p a { }

/* ✅ Faster — single class as key selector */
.article-link { }

/* Avoid overqualifying */
div.container { }  /* ❌ Redundant */
.container { }     /* ✅ Clean */

7. WordPress Selector Patterns

For targeting WordPress-specific HTML structure:

/* Target GeneratePress elements */
.main-navigation .nav-bar-items > li > a { }
.inside-article .entry-content p { }

/* Target Bricks Builder elements */
.brxe-section .brxe-container { }
[data-id="abc123"] { }   /* Avoid — use class instead */

/* WooCommerce-specific selectors */
.woocommerce div.product .price { }
.woocommerce-cart .cart_item td { }
.woocommerce ul.products li.product { }

1. Basic Selectors​

2. Combinator Selectors​

3. Attribute Selectors (Full Reference)​

4. Grouping Selectors​

5. Selector Specificity Quick Reference​

6. CSS Selector Performance Tips​

7. WordPress Selector Patterns​