The Future of CSS: Target Multiple Classes with the Class Prefix Selector

To target aggregate classes that stock the aforesaid prefix, you’d typically person to edifice to brittle property selectors aliases adhd other guidelines classes to your markup. To make things easier, CSS is getting a caller selector: The Class Prefix Selector (.prefix-*).

~

~

The Problem: Targeting Multiple Prefixed Classes

When coming up pinch classnames for usage successful the people attribute, a communal believe is to usage a prefix to clasp immoderate grouping aliases hierarchy. You mightiness beryllium acquainted pinch classes for illustration .btn-primary, .btn-secondary, .btn-danger, and truthful on.

To use a guidelines style to each of these buttons today, you typically person to database them each out, aliases present a abstracted .btn guidelines class:

/* Adding a guidelines people */ .btn { padding: 0.5rem 1rem; border-radius: 4px; } /* Or listing everything... yuck! */ .btn-primary, .btn-secondary, .btn-danger { padding: 0.5rem 1rem; border-radius: 4px; }

Some of you moreover edifice to substring-matching property selectors, but those tin beryllium notoriously brittle and disfigured erstwhile dealing pinch aggregate classes connected a azygous element:

/* Works, but tin beryllium error-prone pinch whitespace */ [class^="btn-"], [class*=" btn-"] { padding: 0.5rem 1rem; }

~

The Solution: The Class Prefix Selector

Just 2 weeks ago, astatine the CSS Working Group F2F gathering successful Berlin (August 2026), we resolved to adhd a dedicated Class Prefix Selector to the CSS Selectors Level 5 specification. The thought was primitively sounded by Lea Verou backmost successful 2024 (w3c/csswg-drafts/#10001).

The syntax is incredibly straightforward:

.btn-* { padding: 0.5rem 1rem; border-radius: 4px; }

That’s it! The -* portion astatine the extremity makes the selector a Class Prefix Selector and will effort to lucifer immoderate people that originates pinch that hyphen-separated prefix.

It’s a immense triumph for inferior classes and creation systems, allowing you to easy target groups of related elements without having to bloat your HTML payload aliases constitute vulnerable property selectors.

~

What astir the quiet string?

An absorbing mobility that popped up during the discussions is whether .foo-* should lucifer the quiet drawstring (w3c/csswg-drafts/#14291), meaning: should .foo-* besides lucifer an constituent that merely has the .foo- class?

While the nonstop default behaviour is still being ironed out, presently the selector is specified to only lucifer classes that commencement pinch the prefix and that person astatine slightest 1 characteristic beyond the prefix (and the first specified characteristic beyond the prefix is not besides a hyphen)

So no, class="foo-" would NOT beryllium matched by .foo-*, which I deliberation is fine. That aforesaid selector besides would not lucifer class="foo--", which is besides astir apt fine.

~

What astir non-dashes?

The Class Prefix Selector is presently constricted to hyphen-separated prefixes, astatine slightest astatine first. Other separators, for illustration _, mightiness beryllium added arsenic possibilities successful the early arsenic we person petition from authors for illustration yourself astir what would beryllium needed.

One point that is already rather clear correct now, is that location must astatine slightest beryllium some separator. Arbitrary prefixes (like .foo*) are not going to beryllium allowed for astatine slightest 2 reasons:

1. You could accidentally overselect: .foo* would besides lucifer .footer
2. Selector Performance: Browsers typically create buckets for people selectors for speedy selector matching. Adding arbitrary wildcards conclusion that optimization.

Similarly, wildcards successful the mediate of a selector (such arsenic .card-*-primary) are besides not going to beryllium allowed.

---

# Browser Support

💡 Although this station was primitively published successful August 2026, the database beneath is perpetually being updated. Last update: August 20, 2026.

Since this was virtually conscionable resolved astatine the CSSWG F2F successful Berlin 2 weeks ago, browser support is presently non-existent. To travel on pinch the advancement – if immoderate – you tin travel these browser issues:

Chromium (Blink)

❌ No Support

Subscribe to CrBug #543356377 to travel along.

Firefox (Gecko)

❌ No Support

There is nary bug search this yet.

Safari (WebKit)

❌ No Support

There is nary bug search this yet.

This characteristic is still successful its early days and needs to beryllium fleshed retired further, truthful could beryllium that it takes a fewer much years earlier you tin usage it successful accumulation …

---

# Feature Detection

You tin characteristic observe support pinch a regular @supports rule:

@supports selector(.foo-*) { /* Browser has support */ }

The pursuing CodePen uses this and will ray greenish erstwhile you browser supports it:

See the Pen
CSS Class Prefix Selector Support test by Bramus (@bramus)
connected CodePen.

---

Spread the word

Feel free to reshare 1 of the pursuing posts connected societal media to thief dispersed the word:

• 🦋 Bluesky
• 🦣 Mastodon

~