Grouping & the :is() / :where() Selectors

Grouping selectors let you apply the same rule to multiple targets without repeating declarations. CSS also provides functional pseudo-classes that make complex grouping easier.

Classic Comma Grouping

Separate any number of selectors with commas. If one selector in the list is invalid, the entire rule is discarded in older engines.

:is() Pseudo-Class

:is() accepts a forgiving selector list — an invalid selector inside is simply ignored rather than killing the whole rule. Its specificity equals the most-specific selector in its argument list.

:where() Pseudo-Class

:where() behaves like :is() but always has zero specificity, making it ideal for reusable base styles you never want to fight against later.

Example

/* Classic grouping */
h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", sans-serif;
    line-height: 1.2;
    color: #111;
}

/* :is() — forgiving, inherits highest specificity */
:is(article, section, aside) h2 {
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 0.3em;
}

/* :where() — zero specificity, easy to override */
:where(ul, ol) {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

/* Nesting with :is() to reduce repetition */
:is(.card, .panel, .modal) :is(h2, h3) {
    margin-top: 0;
    color: #1a73e8;
}

/* :where() for a reset that never fights specificity */
:where(button, [role="button"]) {
    cursor: pointer;
    border: none;
    background: transparent;
}

CSS

Full Editor

Pro Tip

Use :where() for CSS resets and base styles so that any later rule — even a single-class selector — can override them without specificity battles.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned