Runnable CSS Docs: Selectors

Q: What is a CSS selector?

The part of a CSS rule before the { that says which elements the declarations apply to. In p.note { color: blue; }, the selector p.note matches every with the class note.

Q: What is the difference between a space and > in a CSS selector?

A space is the descendant combinator: nav a matches every link anywhere inside a nav, at any depth. > is the child combinator: nav > a matches only links whose direct parent is the nav.

Q: What does + mean in CSS?

is the adjacent sibling combinator. h2 + p matches a that comes immediately after an with the same parent. ~ is looser: h2 ~ p matches every later sibling.

Q: How do I select elements by attribute in CSS?

Put the attribute in square brackets: [disabled] matches elements that have it, [type="email"] matches an exact value, [href^="https"] a value that starts with a string, [href$=".pdf"] one that ends with it, and [class*="btn"] one that contains it.

Q: Can CSS select a parent element?

Yes, with the :has() pseudo-class, supported in current Chrome, Firefox and Safari. li:has(> a.active) matches the list items that directly contain an active link.

What a CSS selector is

A selector is the part of a rule before the curly braces. It decides which elements the declarations apply to.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

The five basic selectors cover most real stylesheets:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Selector types at a glance

Selector	Example	Matches
Universal	`*`	Every element
Type	`p`	Every `<p>`
Class	`.tip`	Elements with `class="tip"` (among others)
ID	`#main-title`	The element with `id="main-title"`
Attribute	`[type="email"]`	Elements whose attribute matches
Pseudo-class	`a:hover`, `li:first-child`	Elements in a state or position
Pseudo-element	`p::first-line`, `.x::before`	A part of an element
Group	`h1, h2, h3`	Anything matching one of the list
Compound	`p.tip`	A `<p>` that also has the class

Classes and IDs have their own page, CSS class selector. Pseudo-classes such as :nth-child() and :not() are covered on the pseudo-classes page.

Combinators: descendant vs child

A combinator joins two selectors by their relationship in the HTML tree. There are four.

Combinator	Syntax	Matches `B` when
Descendant	`A B` (space)	B is anywhere inside A
Child	`A > B`	B's parent is A
Adjacent sibling	`A + B`	B comes right after A, same parent
General sibling	`A ~ B`	B comes somewhere after A, same parent

The space and the > are the pair people mix up. The descendant selector reaches any depth; the child selector stops at one level:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Sibling combinators: + and ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Siblings only look forward. There is no "previous sibling" combinator, though :has() can express it: h2:has(+ p) matches an h2 that is directly followed by a p.

Attribute selectors

Square brackets match on attributes and their values:

Selector	Matches
`[disabled]`	Has the attribute, any value
`[type="email"]`	Value is exactly `email`
`[href^="https"]`	Value starts with `https`
`[href$=".pdf"]`	Value ends with `.pdf`
`[class*="icon"]`	Value contains `icon` anywhere
`[lang\|="en"]`	Value is `en` or starts with `en-`
`[data-state="open" i]`	Exact match, ignoring case

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Attribute selectors on data-* attributes are a clean way to style state that JavaScript sets, without inventing class names.

Try any selector

Type a selector into the box. Every element it matches gets an amber outline, and the count shows below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Try #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Compound vs descendant: the space matters

p.note and p .note differ by one space and mean different things.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

How browsers read selectors

When several rules match the same element and set the same property, the more specific selector wins, and on a tie the later one wins. An ID outweighs any number of classes, and a class outweighs any number of type selectors; the !important page has the full specificity table.

A group has one catch: if any selector in a plain list is invalid, the whole rule is dropped. In a, b:unknown { } not even the links are styled. Wrapping the list in :is() makes it forgiving, so :is(a, b:unknown) still styles the links.

Common mistakes

Missing the dot or hash. tip { } targets a <tip> element, not class="tip". Write .tip.
Space in a compound selector. p .note is not p.note.
Expecting > to reach grandchildren. Use a space for any depth.
One typo breaks a whole group. In h1, h2:hovr, h3 nothing gets styled.
Over-long selectors. body div.wrapper ul li a is slow to read and hard to override. A single class is usually enough.

Frequently Asked Questions

What is a CSS selector?

The part of a CSS rule before the { that says which elements the declarations apply to. In p.note { color: blue; }, the selector p.note matches every <p> with the class note.

What is the difference between a space and > in a CSS selector?

A space is the descendant combinator: nav a matches every link anywhere inside a nav, at any depth. > is the child combinator: nav > a matches only links whose direct parent is the nav.

What does + mean in CSS?

+ is the adjacent sibling combinator. h2 + p matches a <p> that comes immediately after an <h2> with the same parent. ~ is looser: h2 ~ p matches every later <p> sibling.

How do I select elements by attribute in CSS?

Put the attribute in square brackets: [disabled] matches elements that have it, [type="email"] matches an exact value, [href^="https"] a value that starts with a string, [href$=".pdf"] one that ends with it, and [class*="btn"] one that contains it.

Can CSS select a parent element?

Yes, with the :has() pseudo-class, supported in current Chrome, Firefox and Safari. li:has(> a.active) matches the list items that directly contain an active link.

Related concepts