Post

Bramus
@bram.us

To target multiple classes with the same prefix, you'd typically have to resort to brittle attribute selectors. To make things easier, CSS is getting a new selector: the “Class Prefix Selector” (`.foo-*`). Check brm.us/class-prefix... to get the details. (Browser Support: None 😛 — just resolved!)

brm.usThe Future of CSS: Target Multiple Classes with the Class Prefix SelectorTo 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 n...
Christoph Päper
@crissov.de

Indeed, it could mention why `[class|="foo"]` (even if relaxed as suggested) is also not quite the same as `[class^="foo-"], [class*=" foo-"]` or `.foo-*`.

0 reposts2 likes

Christoph Päper
@crissov.de

Relaxed* `[class|="x" i]` matches <a class="x"/> <a class="x z"/> <a class="x- z"/> <b class="x-y z"/> <b class="x--y z"/> <b class="x-y- z"/> <a class="z x"/>* <a class="z x-"/>* <b class="z x-y"/>* <a class="X-y"/> but could never match <c class="x_y"/> <d class="xy"/> `.x-*` matches like `b`.

Christoph Päper
@crissov.de

In other words, since `[attr|=val]` was intended for possibly hyphenated BCP47 codes in `hreflang` etc., `[class|=foo]` matches the prefix even if it stands alone, which `.foo-*` is designed not to do. `:is([class^="foo-"], [class*=" foo-"])` also matches when nothing follows the hyphen.

Ana Tudor
@anatudor.bsky.social

Yeah, this. I just don't understand why using attribute selectors would be a problem. Not to mention I don't even understand what that perf thing is trying to say. Beyond that probably it isn't as fast as a class, but I have no idea what to make of those numbers, what they are supposed to mean...

Brian Kardell
@bkardell.com

Yeah, I mean... I think the issue itself nor the discussions contain "brittle" so it's worth calling out why you say that as it's non-obvious. As for speed, it's got to do exactly the same thing - I guess the hope is it allows you to build another optimized collection by being more specific but idk