CSS Selector Clarification: |= vs ^= [duplicate]

Question

According to W3Schools:

[foo|='bar'] "Selects all elements with a [foo] attribute starting with "bar"

and

[foo^='bar'] "Selects every element whose [foo] attribute value begins with "bar"

In my application, I have inputs with IDs "Input-123456", etc.

Selecting them with input[id^="Input-"] works, whereas input[id|='Input-'] returns nothing.

So what's the difference?

Answer 1

From the "real" reference (W3C):

E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"

E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"

Always go to the actual standard when there appears to be an inconsistency. I tend to avoid w3schools because their quality control is sometimes less than stellar.

Answer 2

https://css-tricks.com/attribute-selectors/

See |= section, the difference is in the dash separated list.