What is the difference between a pipeline and a cap character in a CSS selector?

Question

I am reading a css3 selector, I can not understand the difference on this [lang | = en] and [lang ^ = en]. Both selectors work the same way, is there any significant difference.

Please advise me.

Thank you for your help.

Answer 1

I agree that the specification is a bit confusing. The selector |= must have a dash that follows the attribute value, and ^= not. |= more specific value is required.

 [foo|=en] /* works for `en-` */ [foo^=en] /* works for `en` */ 

http://jsfiddle.net/4ortrxhq/