# New CSS Class Prefix Selector Feature

Proposed CSS selector syntax to simplify class prefix matching for web developers.

- **Source:** [CSS-Tricks (feeds.feedburner.com)](https://css-tricks.com)
- **Published:** 2026-08-21
- **Topic:** [Software & Engineering](https://brifing.si/c/engineering)
- **Original article:** <https://css-tricks.com/resolved-css-class-prefix-selector/>
- **On Brifing:** https://brifing.si/s/225fea86-7d18-47d3-baed-875bb364e7e0

## Limitations of Current Solutions

Currently, complex selectors like [class^='btn-'] are used to match similar classes in CSS. These methods are both hard to read and can cause performance issues. Especially in large-scale projects, such selectors are known to create significant browser overhead. Additionally, current solutions may require extra data attributes in HTML.

## Details of the New Proposal

The new class prefix selectors like .btn-*, added to the Selectors Level 5 specification, offer developers cleaner syntax. This method was announced by Bramus from the Chrome team and was first proposed by Lea Verou in 2024. The new selector uses a special wildcard (*) character for matching class prefixes. It was added to the specification draft three days ago.

## Performance Advantages

The new .prefix-* selector promises better performance than current substring matching methods. The Chrome team states this feature can be specifically optimized by browser engines. However, some developers like Brian Kardell question this claim, arguing that existing solutions could be optimized similarly.

## Syntax Improvements

The new syntax provides significant ergonomic advantages for developers. For example, instead of writing .btn-primary, .btn-secondary etc. separately, developers can use .btn-*. This feature will particularly ease code maintenance in large design systems and component libraries. It's also expected to work well with nested CSS structures.

## Backward Compatibility

The new feature is designed to be fully backward compatible. Developers can continue using old substring selectors. However, when the new syntax is adopted, it will significantly simplify codebases. Browser support can be checked with @supports rule, allowing for progressive enhancement strategies.

## Limitations and Details

The new selector has some limitations: it doesn't support variations like .prefix* or .prefix_*. It only works with hyphen-separated class names. According to the specification draft, its specificity value will be the same as regular class selectors (0,1,0). Special support for web components is also being discussed.

## Community Reactions

The CSS community is divided about the new feature. Some developers argue it's an unnecessary addition, claiming existing solutions are sufficient. Others consider it revolutionary for code readability and maintenance, especially teams developing design systems who are eagerly awaiting this feature.

## Future Expectations

The new selector is expected to gain browser support in the near future. The Chrome team is predicted to implement it quickly. Such small but impactful improvements in CSS standards can significantly change web development practices long-term. Developers are advised to prepare for this change and plan code revisions.

## Sources covering this story

- https://css-tricks.com/resolved-css-class-prefix-selector/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._