Neon DistrictISSUE #22 of 50

pseudo-classes · :is() · :where() · :not()

PrismaVSJank the Janitor

Prisma says:is(), :where(), and :not() group and negate selectors to keep CSS DRY.

:is(h1, h2, h3) matches any listed selector. :where() is identical but contributes zero specificity (great for overridable defaults). :not(.active) matches everything except. Together they shorten selectors and tame specificity.

Power-ups you unlock

:is(a, b, c) matches any in the list
:where() = :is() with zero specificity
:not(sel) negates a match
Shorten selectors and control specificity

Jank the Janitor attacks — common mistakes

Using :is() when you wanted :where()’s low specificity
:not() with a complex list raising specificity
Forgetting :is() takes the highest specificity of args

Boss battleReplace three heading rules with one :is(h1,h2,h3), then use :where for a reset.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>:is(h1,h2,h3){color:#b388ff;font-family:sans-serif}p:not(.muted){color:#e6e0ff}.muted{color:#5a527a}</style></head><body style="background:#06040d;padding:20px"><h1>h1</h1><h2>h2</h2><p>normal</p><p class="muted">muted</p></body></html>

▶ Open the interactive comic issue

‹ Pseudo-Classes · :Nth-Child · :Nth-Of-Type Pseudo-Classes · :Has() · The Parent Selector ›