:not() :is() and :where()
Exclude elements with :not(), match any of a list with :is(), and use :where() for low specificity.
:not() :is() and :where() is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
:not() Pseudo-class
:not(selector) selects elements that do not match the given selector. It inverts the selection.
/* Style all inputs except submit buttons */
input:not([type="submit"]) {
border: 1px solid #ccc;
}:not() with Multiple Arguments
Modern CSS allows multiple arguments inside :not() — it matches elements that match none of the listed selectors:
a:not(.active, .disabled) {
color: inherit;
}:not() Specificity
The specificity of :not() is the specificity of its most specific argument. :not(.active) has class-level specificity (0,1,0).
:is() Pseudo-class
:is() matches any element that matches any of a list of selectors. It simplifies grouping and reduces repetition.
/* Without :is() */
header h1, header h2, header h3 { color: white; }
/* With :is() */
header :is(h1, h2, h3) { color: white; }:is() Specificity
:is() takes the specificity of its most specific argument. If the list contains an ID selector, the whole rule has ID specificity.
:is(#header, .card) h2 {
/* has ID specificity due to #header */
}:is() Forgiving Parsing
:is() uses forgiving selector parsing: if any selector in the list is invalid, it is silently ignored and the rest still apply. Regular comma-separated selectors fail entirely if one is invalid.
:where() Pseudo-class
:where() works exactly like :is() but has zero specificity. It is designed for utility classes and reset styles that should be easy to override.
:where(h1, h2, h3) {
/* zero specificity — easy to override */
margin-top: 0;
}:where() for Resets
:where() is ideal for CSS resets and base styles that should never win specificity battles:
:where(ul, ol) {
list-style: none;
padding: 0;
margin: 0;
}
/* Any component style can override without needing !important */Comparing Specificity
Summary of specificity behavior:
:is()— highest specificity among arguments:where()— always zero specificity:not()— highest specificity among arguments
Chaining :is() and :not()
Combine them for precise, readable selectors:
.nav :is(a, button):not(.disabled) {
cursor: pointer;
color: white;
}Browser Support
:is() and :where() are supported in all modern browsers. :not() with multiple arguments is supported in modern browsers. Avoid in projects requiring IE11 support.
Quick Check
Which pseudo-class has zero specificity regardless of its arguments?
Recap
:not() inverts selection and accepts multiple arguments. :is() matches any of a list with the highest specificity in that list. :where() does the same but with zero specificity — perfect for resets. All three use forgiving parsing, silently ignoring invalid selectors.
Frequently asked questions
Is the “:not() :is() and :where()” lesson free?
Yes — the full text of “:not() :is() and :where()” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “:not() :is() and :where()”?
Exclude elements with :not(), match any of a list with :is(), and use :where() for low specificity. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “:not() :is() and :where()” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.