Re: [csswg-drafts] [selectors-4] Attribute match syntax extended to cover tag selectors (#6571)

For hyphen-prefixed class names, being discussed in #10001, I suggested to slightly change the existing attribute selector, so `[class|="my"]` would not only work for `<foo class="my-class">` but also with multiple or non-first values as in `<foo class="bar my-first my-second">`. (`[…|~=…]` or `[…~|=…]` could be a more explicit but new alternative.)

The pipe or vertical bar character `|` used therein is also found already in [namespaced element and attribute selectors][css-namespaces]. They [support matching](https://drafts.csswg.org/selectors-3/#univnmsp) all elements from a given namespace prefix, `ns|* {}`, and also matching a given element name in any (or no) namespace, `*|element {}` or – that’s not the same: – outside any namespace `|element {}`.

~~~~ ebnf
@namespace <namespace-prefix>? [ <string> | <url> ] ;
~~~~

This vague precedence or similarity could inform the WG to change or extend this at-rule syntax to support _pseudo-namespaces_ (in HTML) that do not use a colon but a hyphen after the prefix. For instance, this could be indicated by a local namespace URL, starting with `#`, which [should never occur in XML](https://www.w3.org/2000/09/xppa). Within selectors, it would work the same as with XML namespaces.

~~~~ html
<my-elem my-attr="my-value" data-my="1" data-attr="1"/>
<your-elem your-attr="your-value" data-your="1" data-attr="1"/>
<elem attr="value"/>
<my:elem my:attr="my:value"/>
~~~~
<!--
<myelem myattr="myvalue"/>
<elem xmlns="#"/>
<elem xmlns:my="#"/>
<my:elem xmlns="#"/>
<my:elem xmlns:my="#"/>
-->
~~~~ css
[my-attr|="my"] {/* already works for single values */}

my-elem {/* just works */}
[my-attr] {/* just works */}

@namespace my "#my"; /* example syntax, could make sense to restrict the prefix to <dashed-ident>; better use "#" or "#my-"? */

my|* {/* now selects <my-elem> */}
[my|*] {/* now selects <… my-attr>, but not <my-elem attr> */}

*|elem {/* now selects <my-elem> and still <elem> and <my:elem>, but not undeclared <your-elem> */}
[*|attr] {/* now selects <… my-attr> and still <… attr>, but not undeclared <… your-attr> nor <… my:attr> – I think */}

@namespace "#my"; /* example default namespace declaration */

|elem {/* now selects <my-elem>, and still <elem> */}
[|attr] {/* unaffected, does not select <… my-attr>, just <… attr>! */}
~~~~

[css-namespaces]: <https://drafts.csswg.org/css-namespaces-3/#declaration>


-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6571#issuecomment-4178041898 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 2 April 2026 13:50:47 UTC