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-*`.

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.

0 reposts0 likes