Selectors, Specificity & the Cascade

A selector is a pattern the browser tests against every element; the rule's declarations apply to every element that matches. The building blocks are simple selectors: a type selector (p) matches by tag name, a class selector (.note) by a word in the class attribute, an id selector (#intro) by the id, an attribute selector ([data-state="open"]) by any attribute, and the universal selector (*) matches every element.

Simple selectors written without spaces form a compound selector, and every part must match the same element: a.btn[href] is "an <a>, with class btn, that has an href". A space between them would mean something completely different (a descendant, see Combinators).

Mental model: each simple selector is a filter, and a compound selector stacks filters on one element. In practice you style almost everything with classes: they're reusable, they say what a thing is in your design, and they keep specificity low and equal. Ids are unique per page and very specific, so they're better as link targets and JavaScript hooks than as styling hooks.

* { box-sizing: border-box; }                    /* universal */
p { color: navy; }                               /* type */
.note { background: #fef9c3; }                   /* class */
#intro { font-weight: 700; }                     /* id */
[data-state="open"] { outline: 2px solid teal; } /* attribute */
a.btn[href] { color: crimson; }                  /* compound */

<p id="intro">Intro paragraph</p>
<p class="note">A note</p>
<div class="note" data-state="open">An open panel</div>
<a class="btn" href="#">A real link</a>
<a class="btn">An anchor without href</a>

a[href^="https://"] { color: green; }
a[href$=".pdf"]     { color: crimson; }
a[href*="example"]  { font-style: italic; }
[class~="warn"]     { background: #fee2e2; }
[class="warn"]      { outline: 2px solid crimson; }
[lang|="en"]        { text-decoration: underline; }
[data-size="large" i] { font-size: 20px; }

<a id="ext" href="https://example.com/">external</a>
<a id="pdf" href="/files/cv.pdf">a PDF</a>
<p id="warn" class="box warn">class="box warn"</p>
<p id="gb" lang="en-GB">lang="en-GB"</p>
<p id="es" lang="es">lang="es"</p>
<p id="big" data-size="LARGE">data-size="LARGE"</p>

DIV.note { color: green; }        /* tag case doesn't matter */
.Note    { background: #fee2e2; } /* class case does */
#1st     { color: crimson; }      /* invalid selector: the whole rule is dropped */
#\31 st  { font-weight: 700; }    /* "\31 " is the escaped digit 1 */

<div class="note" id="n">class="note"</div>
<p id="1st">id="1st"</p>

h4, h5:not-a-real-thing, h6 { color: crimson; }
h4 { margin: 0; }

<h4>h4</h4><h6>h6</h6>

.card.featured { color: crimson; }

<div class="card featured">A</div>
<div class="card"><p class="featured">B</p></div>
<div class="featured card">C</div>

.card.featured { color: crimson; }

<div class="card featured" id="a">A</div>
<div class="card"><p class="featured" id="b">B</p></div>
<div class="featured card" id="c">C</div>

A combinator joins compound selectors and describes how the matched elements must be related in the DOM tree. There are four: the descendant combinator (a space: .menu a is any a anywhere inside .menu), the child combinator (>: .menu > li is an li whose parent is .menu), the next-sibling combinator (+: h3 + p is a p immediately after an h3), and the subsequent-sibling combinator (~: h3 ~ p is every p after an h3 with the same parent).

The selector always selects the element on the right; everything to its left is a condition about its ancestors or earlier siblings. So read .menu > li a right to left: "an a, inside an li, whose parent is .menu".

Mental model: the DOM is a family tree. A space means "descendant (child, grandchild, any generation)", > means "direct child only", + means "the very next younger sibling", and ~ means "any younger sibling". Combinators only look down the tree and forward among siblings, never up or back; looking up or back is what :has() was added for.

.menu a      { color: blue; }                 /* descendant */
.menu > li   { border-left: 4px solid teal; } /* child */
h3 + p       { color: crimson; }              /* next sibling */
h3 ~ p       { font-style: italic; }          /* subsequent siblings */
.menu, section { margin: 0 0 8px; }

<ul class="menu">
  <li id="top"><a href="#" id="shallow">Top link</a>
    <ul><li id="sub"><a href="#" id="deep">Nested link</a></li></ul>
  </li>
</ul>
<section>
  <p id="p0">before the heading</p>
  <h3>Heading</h3>
  <p id="p1">right after</p>
  <p id="p2">two after</p>
  <div>a div</div>
  <p id="p3">after the div</p>
</section>

h3 + p { color: crimson; }
h3 { margin: 0; }

<section><h3>A</h3> some loose text <!-- a comment --> <p id="a">p after text</p></section>
<section><h3>B</h3><span>x</span><p id="b">p after a span</p></section>

.light a { color: navy; }
.dark a  { color: gold; }
.dark  { background: #1e293b; padding: 8px; }
.light { background: #f8fafc; padding: 8px; }

<div class="dark">
  <a href="#" id="d">dark link</a>
  <div class="light"><a href="#" id="l">light link inside dark</a></div>
</div>

ul > li + li { color: crimson; }

<ul>
  <li>one</li>
  <li>two</li>
  <li>three <ul><li>nested a</li><li>nested b</li></ul></li>
</ul>

ul > li + li { color: crimson; }
li { color: black; } /* stops inheritance so only real matches turn crimson */

<ul>
  <li id="one">one</li>
  <li id="two">two</li>
  <li id="three">three <ul><li id="na">nested a</li><li id="nb">nested b</li></ul></li>
</ul>

A pseudo-class is a keyword after a colon that selects elements by state or position rather than by anything written in the markup: :hover, :focus-visible, :checked, :disabled, :first-child, :nth-child(2n), :empty, :root. They describe facts the browser knows and the HTML doesn't spell out: where an element sits among its siblings, whether a checkbox is ticked, whether the pointer is over it.

They fall into groups. Structural: :first-child, :last-child, :only-child, :nth-child(), :nth-of-type(), :empty, :root. User action: :hover, :active, :focus, :focus-visible, :focus-within. Form state: :checked, :disabled, :required, :invalid, :user-invalid, :placeholder-shown. Links: :link, :visited, :any-link. Logical: :is(), :where(), :not(), :has() (their own topic: :is(), :where(), :not() and :has()).

Mental model: a pseudo-class is a class the browser adds and removes for you as things change. That's also how they count for specificity: exactly like a class, 0-1-0.

li { padding: 2px 6px; }
li:first-child   { color: green; }
li:last-child    { color: crimson; }
li:nth-child(odd) { background: #e2e8f0; }
li:nth-child(3n) { font-weight: 700; }

<ol>
  <li>one</li><li>two</li><li>three</li>
  <li>four</li><li>five</li><li>six</li>
</ol>

p:nth-child(2)   { color: crimson; }
p:nth-of-type(2) { text-decoration: underline; }

<article>
  <h3 id="h">heading (child 1)</h3>
  <p id="a">first p (child 2)</p>
  <p id="b">second p (child 3)</p>
</article>

li:nth-child(-n+3)     { color: green; }
li:nth-child(n+4)      { color: crimson; }
li:nth-last-child(2)   { font-weight: 700; }
li:nth-child(2 of .done) { text-decoration: underline; }

<ul>
  <li class="done">1 done</li><li>2</li><li class="done">3 done</li>
  <li>4</li><li class="done">5 done</li><li>6</li>
</ul>

input:checked + label   { color: green; font-weight: 700; }
input:disabled          { opacity: 0.5; }
input:required          { border-left: 4px solid crimson; }
input:placeholder-shown { background: #fef9c3; }
.toggle:checked ~ .panel { display: block; }
.panel { display: none; }

<input type="checkbox" id="terms" checked><label for="terms" id="lt">I agree</label>
<input type="checkbox" id="news"><label for="news" id="ln">Newsletter</label>
<p><input id="name" required placeholder="Name"> <input id="off" disabled value="locked"></p>
<input type="checkbox" class="toggle" id="more" checked><label for="more">Show more</label>
<div class="panel" id="panel">More content</div>

a:link    { color: navy; }
a:visited { color: purple; }
a:hover   { color: crimson; }
a:active  { color: orange; }

<a id="real" href="#somewhere">has href</a>
<a id="placeholder">no href</a>

.box { min-height: 10px; margin-bottom: 4px; background: #e2e8f0; }
.box:empty { background: #fecaca; }
:root { --accent: teal; }
html  { --accent: crimson; }
.box  { color: var(--accent); }

<div class="box" id="none"></div>
<div class="box" id="space"> </div>
<div class="box" id="comment"><!-- only a comment --></div>

.list p:nth-child(1) { color: crimson; }

<div class="list">
  <h4>Title</h4>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

.list p:nth-child(1) { color: crimson; }
.list p:first-of-type { text-decoration: underline; }
h4 { margin: 0; }

<div class="list"><h4>Title</h4><p id="a">First paragraph</p><p id="b">Second paragraph</p></div>

A pseudo-element selects a part of an element, or creates a box that isn't in the HTML at all. ::before and ::after insert a generated box as the first or last child of the element; ::first-line and ::first-letter style part of the text; ::marker is a list bullet, ::placeholder an input's placeholder, ::selection the highlighted text, ::backdrop the layer behind a modal <dialog>, ::file-selector-button the button inside a file input.

They're written with two colons to tell them apart from pseudo-classes. The four from CSS 2 (:before, :after, :first-line, :first-letter) still work with one colon for compatibility. A pseudo-element counts like a type selector in specificity (0-0-1), and it goes at the end of the selector.

Mental model: a pseudo-class is an adjective ("the hovered link"), a pseudo-element is a noun ("the first letter of the paragraph"). ::before and ::after in particular are decorations stuck to the inside of an element: they're laid out and painted like children, but they aren't in the DOM, so JavaScript can't select them and their text isn't selectable.

.req::after { content: " *"; color: crimson; }
.badge::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: green;
}

<label class="req" id="email">Email</label>
<p><span class="badge" id="b">Online</span></p>
<p><span id="plain">Online</span></p>

.box { width: 200px; background: #f1f5f9; margin-bottom: 8px; }
.box::before { display: block; height: 40px; background: #a5b4fc; }
.with::before { content: ""; }

<div class="box" id="without"></div>
<div class="box with" id="with"></div>

.d::before, .i::before { content: ""; display: block; height: 50px; background: #fca5a5; }
.d, .i { width: 120px; }

<div class="d" id="d"></div>
<input class="i" id="i"><input id="plain" style="width: 120px">

.fav::before   { content: "★ "; }
.alt::before   { content: "★ " / "Favourite"; }
.quiet::before { content: "★ " / ""; }

<button class="fav" id="a">Save</button>
<button class="alt" id="b">Save</button>
<button class="quiet" id="c">Save</button>

.story::first-letter { font-size: 40px; float: left; line-height: 1; margin-right: 4px; color: teal; }
.story::first-line   { font-weight: 700; }
li::marker           { color: crimson; content: "→ "; margin-left: 30px; /* ignored */ }
input::placeholder   { color: #64748b; font-style: italic; }
::selection          { background: #fde68a; }
.old:before          { content: "single colon still works "; }

<p class="story" id="s">Once upon a time, the box model had two sizing modes and everyone argued about which was right.</p>
<ul><li id="li">Marker with an arrow</li></ul>
<input id="in" placeholder="Search">
<p class="old" id="old">.</p>

.rating::before { color: gold; font-size: 20px; }
.rating::after  { content: "★★★"; }

Specificity is how the browser ranks selectors when two rules of the same origin and layer set the same property on the same element. Each selector gets a score of three numbers, usually written A-B-C: A counts id selectors, B counts classes, attribute selectors and pseudo-classes, and C counts type selectors and pseudo-elements. The universal selector * and combinators count nothing.

Scores are compared column by column, left to right, like version numbers, not added up as a single number: 1-0-0 beats 0-15-0, because the first column is decided before the second is even looked at. If all three columns tie, the rule that comes later wins (see The cascade).

Mental model: specificity is how precisely a rule points at an element. "Paragraphs" (p) is vague, "notes" (.note) is better, "the intro" (#intro) is exact, and the more precise instruction wins. Inline style attributes aren't selectors at all and beat every selector; !important is a separate step again (see !important).

#intro     { color: crimson; } /* 1-0-0 */
p.note.big { color: purple; }  /* 0-2-1 */
.note      { color: green; }   /* 0-1-0 */
p          { color: navy; }    /* 0-0-1 */

<p id="intro" class="note big">matched by all four rules</p>
<p class="note big">matched by p.note.big, .note and p</p>
<p class="note">matched by .note and p</p>
<p>matched by p only</p>

#x { color: green; }
.a.a.a.a.a.a.a.a.a.a.a { color: crimson; } /* 0-11-0 */
.b.b { color: navy; }                       /* 0-2-0: a repeated class counts twice */
.b   { color: crimson; }

<p id="x" class="a">id against eleven classes</p>
<p class="b">a doubled class</p>

.title, #hero { color: crimson; }
.headline     { color: navy; }

<h2 class="title headline" id="t">matched through .title (0-1-0)</h2>
<h2 class="headline" id="hero">matched through #hero (1-0-0)</h2>

#a#a#a { color: crimson; } /* 3-0-0 */

<p id="a" style="color: teal">inline style</p>

div p.lead        { color: crimson; } /* rule 1 */
.article .lead    { color: green; }   /* rule 2 */
body div.article p { color: navy; }   /* rule 3 */

<div class="article"><p class="lead">Text</p></div>

div p.lead         { color: crimson; }
.article .lead     { color: green; }
body div.article p { color: navy; }

<div class="article"><p class="lead">Text</p></div>

For every element and every property, the browser collects all the declarations that apply and has to choose one. The algorithm that does this is the cascade, and it works per property, not per rule: one rule can win color while another rule wins padding on the same element.

The declarations are compared in a fixed order of criteria, and the first criterion that separates them decides:

1. Origin and importance. From weakest to strongest: browser (user-agent) styles, user styles, author (your) styles, CSS animations, author !important, user !important, browser !important, and finally CSS transitions.
2. Context. Styles inside a shadow tree versus outside it (relevant for web components).
3. Element-attached styles. A style attribute beats any selector.
4. Cascade layers. Declarations in later layers beat earlier ones; unlayered styles beat all layers (see Cascade layers with @layer).
5. Specificity (see Specificity).
6. Scope proximity. For @scope rules, the nearer scope root wins, and any scoped rule beats an unscoped one (see Scoping styles with @scope).
7. Order of appearance. The last declaration wins.

Mental model: a knockout tournament. Every declaration for color enters round one (origin and importance); only the winners of that round go on, and so on. Specificity, the step everyone talks about, is round five: it only breaks ties left over from the earlier rounds.

.card { color: navy; background: #e0f2fe; padding: 8px; }
#special { color: crimson; }
article .card { background: #fef9c3; }
.card { padding: 16px; }

<article>
  <div class="card" id="special">One element, three winning rules</div>
</article>

a { color: green; }

<a href="#" id="styled">styled link</a>

@keyframes tint { from, to { color: teal; } }
#a { color: crimson; }
.anim { animation: tint 100s paused; }
#b { color: navy !important; }

<p id="a" class="anim">animated, against an id</p>
<p id="b" class="anim">animated, against !important</p>

.parent { color: navy; }
.a { color: crimson; color: not-a-colour; }
.b { --size: 20px; color: crimson; color: var(--size); }

<div class="parent">
  <p class="a">invalid when parsed</p>
  <p class="b">invalid when computed</p>
</div>

.btn { background: #bbf7d0; padding: 6px 10px; border: 0; }

<style>.btn { background: #fecaca; }</style>
<button class="btn" id="b">Save</button>

p { color: green !important; }
#intro { color: crimson; }

<p id="intro" style="color: navy">Hello</p>

p { color: green !important; }
#intro { color: crimson; }

<p id="intro" style="color: navy">Hello</p>

Inheritance is how an element gets a value for a property that no rule sets on it: for inherited properties, it takes its parent's computed value. Mostly these are text properties: color, font-*, line-height, letter-spacing, text-align, visibility, cursor, list-style. Box properties (margin, padding, border, background, width, display, position) are not inherited: an element without a rule gets the property's initial value instead.

The crucial detail: inheritance only happens when the cascade found nothing for that property on the element. An inherited value has no specificity at all, so any rule that matches the element, even *, beats it. And what's inherited is the parent's computed value, which is why line-height: 150% and line-height: 1.5 inherit differently (see CSS units).

Mental model: inheritance is the family default. If nobody told you what colour to wear, you dress like your parent. The moment any rule addresses you directly, the family default is ignored. Four keywords let you ask for a specific default explicitly: inherit (take the parent's value), initial (the property's spec default), unset (inherit if the property is inherited, else initial), and revert (go back to what the browser's stylesheet would give).

.panel {
  color: teal;
  font-style: italic;
  border: 2px solid teal;
  padding: 12px;
  background: #f0fdfa;
}

<div class="panel">
  <p id="child">I'm a child of .panel</p>
</div>

#parent { color: crimson; font-size: 18px; }
p { color: navy; }
.fixed a, .fixed button { color: inherit; font: inherit; }

<div id="parent">
  <p id="p">targeted by p</p>
  <span id="s">not targeted</span>
  <a href="#" id="a">a link</a> <button id="b">a button</button>
</div>
<div id="parent2" class="fixed" style="color: crimson; font-size: 18px">
  <a href="#" id="a2">fixed link</a> <button id="b2">fixed button</button>
</div>

.parent { color: teal; border: 2px solid teal; padding: 4px; }
.d-initial { display: initial; }
.d-revert  { display: revert; }
.c-unset   { color: unset; border: unset; }
.c-initial { color: initial; }
h2 { font-size: 40px; margin: 0; }
h2.r { font-size: revert; }

<div class="parent">
  <div class="d-initial" id="di">display: initial</div>
  <div class="d-revert" id="dr">display: revert</div>
  <p class="c-unset" id="cu">color and border: unset</p>
  <p class="c-initial" id="ci">color: initial</p>
</div>
<h2 id="big">h2 at 40px</h2>
<h2 class="r" id="rev">h2 reverted</h2>

.bare     { all: unset; }
.reverted { all: revert; }
.parent   { color: teal; font-size: 18px; }

<div class="parent">
  <button class="bare" id="bare">all: unset</button>
  <button class="reverted" id="rev">all: revert</button>
  <button id="normal">normal</button>
</div>

.box { display: initial; width: 200px; height: 50px; background: gold; }

<div class="box">Hello</div>

.box { display: initial; width: 200px; height: 50px; background: gold; }

<div class="box" id="b">Hello</div>

!important after a value moves that declaration into a higher tier of the cascade. The cascade's first step is origin and importance, and important declarations are compared there, before inline styles, layers and specificity. So .title { color: green !important } beats #title { color: crimson } and even a style attribute.

Two rules follow from where it sits in the cascade. Among important declarations, the normal rules still apply: if two !important declarations compete, the more specific wins, then the later one. And the origin order flips for important declarations: a user's !important beats an author's !important, and the browser's !important beats both. That inversion is deliberate: it lets a user's accessibility stylesheet (larger text, high contrast) win over a site's styles. The same flip happens with cascade layers.

Mental model: !important is a priority lane. Everything in the priority lane is served before anything in the normal lane, but inside the priority lane, people still queue by the normal rules. If everything uses the priority lane, it's just a normal queue again, only harder to reason about.

#title { color: crimson; }
.title { color: green !important; }

<h3 class="title" id="title" style="color: navy">Important wins</h3>

.a { color: crimson !important; }
p.a { color: green !important; }
.b { color: crimson !important; }

<p class="a" id="a">two important rules</p>
<p class="b" id="b" style="color: navy !important">important inline vs important rule</p>

@keyframes try { from, to { color: crimson !important; } }
@keyframes plain { from, to { color: teal; } }
.x { color: navy; animation: try 100s paused; }
.y { color: navy; animation: plain 100s paused; }

<p class="x">keyframe with !important</p>
<p class="y">keyframe without it</p>

.widget-fix .banner { background: #e0f2fe !important; }
.banner { padding: 8px; }

<div class="widget-fix">
  <div class="banner" id="w" style="background: #fecaca">third-party inline style</div>
</div>

#nav a { color: crimson !important; }
.menu a { color: green !important; }
a.link  { color: navy; }

<nav id="nav" class="menu"><a class="link" href="#">Home</a></nav>

#nav a  { color: crimson !important; }
.menu a { color: green !important; }
a.link  { color: navy; }

<nav id="nav" class="menu"><a class="link" href="#">Home</a></nav>

Cascade layers let you group styles and decide, explicitly, which group wins. You declare the order once (@layer reset, base, components, utilities;) and put rules into layers (@layer components { … }). In the cascade, the layer step comes before specificity: a declaration in a later layer beats one in an earlier layer even if its selector is far less specific. Styles that aren't in any layer form an implicit final layer, so unlayered styles beat all layered styles.

It solves the oldest problem in CSS architecture: third-party CSS, resets and base styles with heavy selectors that your components have to out-specify. With layers, priority comes from where you put a rule, not how hard its selector is. MDN lists @layer as Baseline widely available since March 2022.

Mental model: layers are transparent sheets stacked on a projector. The sheet on top shows through wherever it has ink, no matter how bold the ink on the sheets below is. Specificity only matters between rules on the same sheet.

@layer base, components;

@layer base {
  #save.btn.primary { color: crimson; padding: 4px 8px; }
}
@layer components {
  .btn { color: green; }
  .link-btn { color: purple; }
}

/* unlayered */
.link-btn { color: navy; }

<button class="btn primary" id="save">Save</button>
<button class="btn link-btn" id="more">More</button>

@layer theme, overrides;
@layer overrides { p { color: green; } }
@layer theme { p { color: crimson; } }   /* re-opened later in the file */

<p id="p">Which layer wins?</p>

@layer reset, components;
@layer reset      { .a { color: crimson !important; } .b { color: crimson !important; } }
@layer components { .a { color: green !important; } }
.b { color: navy !important; } /* unlayered */

<p class="a" id="a">important in two layers</p>
<p class="b" id="b">important in a layer and unlayered</p>

@layer framework {
  @layer base, theme;
  @layer theme { p { color: green; } }
  @layer base  { p { color: crimson; } }
}
@layer framework.base { p { font-weight: 700; } }
@layer app { p { text-decoration: underline; } }

<p id="p">nested layers</p>

@layer base, theme;
@layer base  { a { color: green; } }
@layer theme {
  a { color: crimson; }
  a.plain { color: revert-layer; }
}

<a href="#" id="t">themed link</a> <a href="#" class="plain" id="p">plain link</a>

@layer components { #hero .title { color: crimson; } }
.title { color: green; }

<section id="hero"><h1 class="title">Hi</h1></section>

@layer components { #hero .title { color: crimson; } }
.title { color: green; }

<section id="hero"><h1 class="title">Hi</h1></section>

These four functional pseudo-classes take selector lists as arguments. :is(A, B) matches anything that matches A or B, which shortens repetitive selectors: :is(h1, h2, h3) a instead of three selectors. :where(A, B) matches exactly the same elements but has zero specificity. :not(A, B) matches elements that match none of the arguments. :has(A) matches an element if A matches relative to it, usually something inside it or after it: .card:has(img) is "a card that contains an image". That's the long-wanted parent selector, and also a previous-sibling selector (h2:has(+ p)).

The specificity rules are the interview question. :is(), :not() and :has() take the specificity of their most specific argument, whichever argument actually matched. :where() always counts 0-0-0, which makes it ideal for defaults that anyone should be able to override.

Mental model: :is() and :where() are the same filter with different weights: :is weighs as much as its heaviest argument, :where weighs nothing. :has() turns selectors around: instead of describing the element by its ancestors, you describe it by what it contains.

:is(h2, h3) a        { color: crimson; }
li:not(.done)        { font-weight: 700; }
.card:has(img)       { border: 2px solid teal; }
:where(.card) p      { color: navy; }
p                    { color: green; }
.card { padding: 8px; margin-bottom: 8px; }

<h2><a href="#" id="a2">in an h2</a></h2>
<h3><a href="#" id="a3">in an h3</a></h3>
<ul><li class="done" id="l1">done</li><li id="l2">to do</li></ul>
<div class="card" id="c1"><svg width="40" height="20"></svg><p id="cp">card text</p></div>
<div class="card" id="c2"><p>no image here</p></div>
<div class="card" id="c3"><img alt="" width="40" height="20"></div>

:is(#nothing, p)  { color: crimson; } /* 1-0-0, though it matches through p */
p.lead            { color: green; }   /* 0-1-1 */
:where(#nothing, .note) { color: crimson; } /* 0-0-0 */
div               { color: navy; }    /* 0-0-1 */

<p class="lead" id="p">a paragraph</p>
<div class="note" id="d">a div</div>

p, p:unknown-thing          { color: crimson; }
:is(p, :unknown-thing).a    { color: green; }
:where(p, :unknown-thing).b { color: green; }
p:not(:unknown-thing, .x).c { color: green; }
div:has(:unknown-thing, i)  { color: green; }

<p id="plain">plain list</p>
<p class="a" id="a">:is()</p>
<p class="b" id="b">:where()</p>
<p class="c" id="c">:not()</p>
<div id="d"><i>:has()</i></div>

:not(.dark) p { text-decoration: underline; }
p:not(.dark p) { color: green; }
.dark { background: #1e293b; color: #fff; padding: 6px; }

<p id="out">outside .dark</p>
<div class="dark"><p id="in">inside .dark</p></div>

.field:has(input:invalid) label { color: crimson; }
h3:has(+ p)                     { margin-bottom: 0; color: teal; }
ul:has(> li:nth-child(4))       { columns: 2; }
form:has(input[type="checkbox"]:checked) .submit { background: #bbf7d0; }
:has(:has(a)) { outline: 5px solid red; } /* invalid: :has() can't nest */

<div class="field"><label id="lbl">Email</label><input type="email" required></div>
<h3 id="h1">heading followed by a paragraph</h3><p>text</p>
<h3 id="h2">heading followed by a list</h3><ul id="short"><li>a</li><li>b</li></ul>
<ul id="long"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<form><input type="checkbox" id="ok" checked><button class="submit" id="go">Send</button></form>

:is(nav, #footer) a { color: crimson; }
.menu a.active      { color: green; }

<nav class="menu"><a class="active" href="#">Home</a></nav>

:is(nav, #footer) a { color: crimson; }
.menu a.active      { color: green; }

<nav class="menu"><a class="active" href="#" id="a">Home</a></nav>

@scope limits rules to a subtree of the document: @scope (.card) { img { … } } styles images inside .card and nowhere else. It can also have a lower boundary: @scope (.card) to (.content) { … } stops at .content, leaving a "donut" so a component's styles don't leak into the slot where other components are rendered. Inside the block, :scope refers to the scope root itself.

It adds two things selectors alone couldn't. First, proximity: when two scoped rules conflict, the one whose scope root is fewer steps up the DOM wins, so nested themes finally behave. That's a step in the cascade after specificity and before order of appearance, and the spec counts rules without a scope as infinitely far away, so at equal specificity a scoped rule beats an unscoped one wherever it's written. Second, no specificity cost: the scope root's selector doesn't add to the specificity of the rules inside (a bare img in the block is 0-0-1, unlike .card img which is 0-1-1).

Support: @scope became Baseline newly available when Firefox 146 shipped it in December 2025 (web.dev); MDN's banner dates it "Baseline 2026, newly available since March 2026". Either way it's new: browsers older than that ignore the whole @scope block, so provide a fallback (or a class-based naming convention) for them. Mental model: @scope is a fence around a garden bed: the rules apply only inside the fence, an inner fence (the to boundary) protects a bed within it, and when two gardeners' rules disagree about a plant, the one whose fence is closest gets the say.

@scope (.card) to (.content) {
  :scope { border: 2px solid teal; padding: 8px; }
  p { color: teal; }
}

<p id="outside">outside any card</p>
<div class="card">
  <p id="inside">in the card</p>
  <div class="content">
    <p id="slot">in the card's content slot</p>
  </div>
</div>

.light a { color: navy; }
.dark a  { color: gold; }

@scope (.s-light) { a { color: navy; } }
@scope (.s-dark)  { a { color: gold; } }

.dark, .s-dark { background: #1e293b; padding: 8px; margin-bottom: 8px; }
.light, .s-light { background: #f8fafc; padding: 8px; }

<div class="dark"><div class="light"><a href="#" id="desc">descendant selectors</a></div></div>
<div class="s-dark"><div class="s-light"><a href="#" id="scoped">@scope</a></div></div>

@scope (#hero) { p { color: crimson; } }  /* p: 0-0-1 */
.intro { color: green; }                  /* 0-1-0 */

@scope (#hero) { :scope .tag { color: crimson; } } /* :scope .tag: 0-2-0 */
.tag.big { color: green; }                         /* 0-2-0, written later */

@scope (.outer) { .x { font-style: italic; } }   /* 0-1-0, farther */
@scope (.inner) { p { font-style: normal; } }    /* 0-0-1, nearer */

<section id="hero">
  <p class="intro" id="i">intro</p>
  <span class="tag big" id="t">tag</span>
</section>
<div class="outer"><div class="inner"><p class="x" id="x">specificity vs proximity</p></div></div>