The Future of CSS: Target Multiple Classes with the Class Prefix Selector

To target multiple classes that share the same prefix, you’d typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a new selector: The Class Prefix Selector (.prefix-*). ~ ⚠️ This post is about an upcoming CSS feature. You can’t use it … yet. This feature is hot off the press — it was resolved on only two weeks ago — and currently only exists in spec text. The spec will most likely see some changes before this is ready for a browser to implement. ~ The Problem: Targeting Multiple Prefixed Classes When coming up with classnames for use in the class attribute, a common practice is to use a prefix to retain some grouping or hierarchy. You might be familiar with classes like .btn-primary, .btn-secondary, .btn-danger, and so on. To apply a base style to all of these buttons today, you typically have to list them all out, or introduce a separate .btn base class: /* Adding a base class */ .btn { padding: 0.5rem…