What is the difference between pipeline & cap symbol in CSS selector?

Question

I'm reading the css3 selectors, I unable to understand difference on this [lang | = en ] and [ lang ^ = en ]. Both selectors are working the same way, is there any major difference.

Please advise me.

Advance thanks.

Answer 1

I agree that the specification is a little confusing. The |= selector has to have a dash that follows the attribute value while ^= does not. |= requires a more specific value.

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

http://jsfiddle.net/4ortrxhq/