8

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
mhodges
  • 10,938
  • 2
  • 28
  • 46
  • 10
    This is why we don't like w3schools... – Joseph Marikle Feb 12 '16 at 19:17
  • @JosephMarikle, the answer below is not better in any way. It is confusing and obfuscating just in the same way. Also, it is hard to work with non-practical oriented specifications, while the w3school is work ready. It is very convenient while working. – Sasuke Uchiha Jun 08 '20 at 10:58
  • [MDN Reference -**Attribute selectors**](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) – vsync Aug 21 '21 at 19:29

2 Answers2

24

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.

Community
  • 1
  • 1
Jim Garrison
  • 85,615
  • 20
  • 155
  • 190
  • 1
    Completely agreed. W3C is hard to navigate, but it is (or is supposed to be) the standard. MDN (which has a [nice section on this](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) btw) is good too, but w3schools always seems to disappoint. – Joseph Marikle Feb 12 '16 at 19:19
  • W3C is the place to go indeed, though I go to css-tricks.net occasionally because I like their examples. – seahorsepip Feb 12 '16 at 19:19
  • 2
    Gotcha, thanks! I have found w3schools to be a great reference for simple things, but I am noticing more and more subtleties that they get wrong like this. Kind of annoying imho. – mhodges Feb 12 '16 at 19:24
  • Could you, please, help me to understand it better. The `[foo^="bar"]` will select an element with the following attribute declaration: `foo="bar"`, while the `foo|="bar"` won\`t select the element, since it requires a hyphen to be present in the attribute value. So, for the element to be matched by both of these selectors its attribute declaration can be the following: `foo="bar-"`. Am I right? If I understand it wrong and I am not right, then your answer lacks correctness, since my statement above does not contradict your answer. – Sasuke Uchiha Jun 08 '20 at 10:54
  • Could you, please, provide a definition for the dash separated list? E.g. is an empty string considered to be a dash separated list? – Sasuke Uchiha Jun 08 '20 at 10:56
2

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

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

seahorsepip
  • 4,519
  • 1
  • 19
  • 30
  • Could you, please, provide a definition for the dash separated list? E.g. is an empty string considered to be a dash separated list? – Sasuke Uchiha Jun 08 '20 at 10:56