The Evolution of CSS: Mastering the Class Prefix Selector

Originally published on August 20, 2026, by Bramus

For years, developers have struggled to target groups of classes that share a common naming convention without creating redundant HTML or writing fragile CSS. Fortunately, a new tool is arriving: The Class Prefix Selector (.prefix-*).

This feature was officially resolved just two weeks ago and is currently residing in the specification text. While the spec may evolve before browser implementation, the core concept is a game-changer for design systems.

---

🚩 The Problem: The "Prefix" Struggle

When organizing CSS, it is standard practice to use prefixes to create a hierarchy. Consider a set of button variants:

• .btn-primary
• .btn-secondary
• .btn-danger

To apply shared styles to all of these, developers typically use one of three methods:

1. The Base Class Approach: Adding an extra class to every element.
2. The Exhaustive List: Manually listing every single variant.
3. The Attribute Selector: Using substring matching (which is often reliable brittle).

Comparison of Legacy Methods

/* Method 1: Base Class (Requires HTML changes) */
.btn { 
  padding: 0.5rem 1rem; 
  border-radius: 4px; 
}

/* Method 2: Manual Listing (Maintenance nightmare) */
.btn-primary, .btn-secondary, .btn-danger { 
  padding: 0.5rem 1rem; 
  border-radius: 4px; 
}

/* Method 3: Attribute Selectors (Fragile whitespace handling) */
[class^="btn-"], [class*=" btn-"] { 
  padding: 0.5rem 1rem; 
}

---

✅ The Solution: .prefix-*

During the CSS Working Group F2F meeting in Berlin (August 2026), a resolution was passed to include the Class Prefix Selector in the CSS Selectors Level 5 specification. This idea was first proposed by Lea Verou in 2024.

The syntax is elegantly simple:

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

By appending -* to a class name, the browser matches any class that begins with that specific hyphenated prefix. This eliminates HTML bloat and removes the need for "ugly" attribute selectors.

How the Matching Logic Works

The selector doesn't just match anything; it follows specific rules to ensure precision. We can represent the matching logic as a mathematical set:

$\text{Match} = \{ \text{class} \mid \text{class starts with } \text{"prefix-"} \land \text{length}(\text{suffix}) \ge 1 \land \text{suffix}[0] \neq \text{'-'} \}$

Here is the decision flow for a selector like .foo-*:

Key Nuances:

• class="foo-" $\rightarrow$ No Match (Needs at least one character after the prefix).
• class="foo--" $\rightarrow$ No Match (The first character after the prefix cannot be another hyphen).
• Separators: Currently, only the hyphen (-) is supported. Other separators (like _) may be added later based on community feedback.

Note: Arbitrary wildcards like .foo* (without the hyphen) are forbidden. This prevents accidental over-selection (e.g., .foo* matching .footer) and ensures browser performance by maintaining efficient class "buckets." Similarly, middle-wildcards like .card-*-primary are not permitted.

---

🌐 Browser Support & Implementation

As this was resolved only two weeks ago, support is currently non-existent.

Implementation Checklist

• Finalize spec text
• Browser engine implementation
• Public beta testing
• Production ready (Estimated: a few years)

Feature Detection

You can check if a user's browser supports this feature using the @supports rule:

@supports selector(.foo-*) { 
  /* Styles for browsers that support the prefix selector */ 
}

---

✍️ About the Author

Bramus is a Belgian frontend developer and a Chrome Developer Relations Engineer at Google. He has been passionate about the web since discovering view-source in 1997.

Disclaimer: The views expressed here are the author's own and not those of their employer. Content is licensed under CC BY 4.0; code is under the MIT License.