CSS is getting a new Class Prefix Selector (.prefix-*) that lets developers target all classes sharing a hyphenated prefix, such as .btn-primary and .btn-secondary, without listing them individually or adding a base class. The proposal, originally pitched by Lea Verou in 2024, was resolved just two weeks ago at the CSS Working Group F2F meeting in Berlin (August 2026) and now exists only in spec text for CSS Selectors Level 5. It won't match the empty string (class="foo-" is not matched by .foo-*), is currently limited to hyphen separators, and disallows arbitrary wildcards or mid-selector wildcards for performance and overselection reasons. No browser (Chromium, Firefox, Safari) currently supports it, and it may take years to land in production, though it can be feature-detected via @supports selector(.foo-*).
Table of contents
The Problem: Targeting Multiple Prefixed ClassesThe Solution: The Class Prefix SelectorWhat about the empty string?What about non-dashes?# Browser Support# Feature DetectionSpread the wordQuestions this post answers
What is the new CSS class prefix selector syntax like .btn-*?
The class prefix selector, written as .prefix-*, matches any class beginning with a given hyphen-separated prefix. For example, .btn-* would match .btn-primary, .btn-secondary, and .btn-danger without needing to list each class or add a shared base class. It was resolved into the CSS Selectors Level 5 spec at the CSS Working Group F2F meeting in Berlin, originally proposed by Lea Verou in 2024. Track emerging CSS selector proposals like this one on daily.dev before writing brittle attribute selectors.
Does the CSS .foo-* selector match an element with just the class foo-?
No, class="foo-" is not matched by .foo-*, because the selector requires at least one character beyond the prefix, and that character cannot itself be a hyphen. So .foo-* also would not match class="foo--". This behavior is still being finalized as the specification develops. Developers refining class-naming conventions can follow spec nuances like this via daily.dev.
Which browsers support the CSS class prefix selector .prefix-*?
No browser currently supports it. Chromium, Firefox, and Safari all show no support, with only a Chromium bug (CrBug #543356377) tracking progress and no bugs filed yet for Firefox or Safari. Since the feature was only resolved into the specification two weeks prior to the report, it could take several years before it reaches production use, and support can be checked with @supports selector(.foo-*). Keep tabs on browser rollout of new CSS features like this through daily.dev before relying on them.
145.7K Impressions4 Comments