CSS Takes a Practical Step Forward With Class Prefix Selector

CSS is getting a dedicated way to target every class that shares a prefix. At its face-to-face meeting in Berlin in August, the CSS Working Group resolved to add a class prefix selector to the Selectors Level 5 specification, Chrome developer relations engineer Bramus wrote on bram.us. The feature exists only in spec text for now and is not yet available in any browser.

The Problem It Solves

Developers commonly group classes with prefixes such as .btn-primary, .btn-secondary and .btn-danger. Styling them all today means listing each one, adding a separate .btn base class to the markup, or using substring-matching attribute selectors like [class*=” btn-“]. Those attribute selectors perform badly. In a benchmark Bramus ran, a regular class selector managed more than 6,000 runs per second while the attribute selector dropped as low as 328, almost 20 times slower.

With the new selector, .btn-* matches any class that begins with the hyphen-separated prefix btn-. The idea was first pitched by Lea Verou in 2024 in CSSWG issue #10001 and was championed at the meeting by Verou and Tab Atkins-Bittner.

Deliberate Limits

As currently specified, the selector matches only classes with at least one character after the prefix, and that character can’t be another hyphen, so .foo-* would not match class=”foo-” or class=”foo–“. The working group is still discussing whether that default should change.

A separator is required. Arbitrary prefixes such as .foo* won’t be allowed, partly because they could accidentally overselect (.foo* would match .footer) and partly because browsers bucket class selectors for fast matching, which arbitrary wildcards would defeat. Wildcards in the middle of a selector, such as .card-*-primary, are also ruled out. Only hyphens are supported for now, though other separators such as underscores could be added if developers ask for them.

For teams with utility classes and design systems, the selector would shrink both stylesheets and HTML while avoiding the performance cost of attribute matching. Bramus is asking developers to send feedback on the in-progress design to the CSS Working Group through issue #10001 while the spec can still change.