# New CSS Class Prefix Selector Feature

A new feature announced to simplify CSS for web developers.

- **Source:** [CSS-Tricks](https://brifing.si/source/eea3b580-b2ba-4369-b9e0-7fc8ad2ad5e3)
- **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/f6ceabb8-73a6-40fa-a53b-0bd0f03a16aa

## A New CSS Feature

A new CSS feature has been added to the Selectors Level 5 specification draft. The .prefix-* syntax will make it easier to select all classes starting with a prefix. This provides a more readable alternative to current [class^='prefix'] and [class*=' prefix'] selectors. The feature was announced by Bramus from the Chrome team and was originally proposed by Lea Verou in 2024.

## Limitations of Current Solutions

Current substring selectors are both verbose and can cause performance issues. The new .prefix-* solution will be particularly useful for components with many similar classes (buttons, cards etc.). Tests have shown that current solutions slow down browsers' CSS matching engines. This innovation aims to address these performance concerns.

## Ergonomics and Readability

The new syntax significantly simplifies CSS writing. Instead of repeatedly defining padding for each button variation like .btn-primary, .btn-secondary, developers can use .btn-*. This will especially ease code maintenance in large-scale projects. The improvement is compared to recent shorthand versions of color functions in CSS.

## Compatibility and Implementation

The new feature is designed to be backward compatible. Old substring selectors will continue to work. However, developers are advised to use @supports selector(.prefix-*) checks until browser support becomes widespread. Full cross-browser implementation is expected to take some time.

## Limitations and Details

The new selector will only work with dash-separated class prefixes. Variations like .prefix* or .prefix_* won't be supported. According to the specification draft, this selector will have the same specificity (0,1,0) as a normal class selector, maintaining consistency with existing CSS structures.

## Community Reactions

The developer community has mixed reactions to this feature. Some argue it's unnecessary as current solutions are sufficient, while others support the ergonomic improvement. Developers like Brian Kardell suggest performance optimizations could be applied to existing selectors instead of introducing new syntax.

## Future Potential

How the feature will interact with nested CSS syntax remains an open question. Usage like .prefix { -* { /* ... */ } } might become possible. There's also potential for selecting web components. These developments could shape the future direction of CSS and its capabilities.

## Importance for Web Developers

This innovation will provide significant convenience for developers managing large CSS codebases, reducing code repetition and lowering maintenance costs. However, adoption may remain limited until widespread browser support is achieved. Developers will need to consider alternative solutions during this transition period.

## 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._