Difference between |= and ^= css

Question

What is the difference between: |= and ^= in css?

Due to this link it isn't one, but why would they bother for two things to be duplicates. http://www.w3schools.com/cssref/css_selectors.asp

[attribute|=value] and [attribute^=value]

First has

Selects every element whose src attribute value begins with "https"

second has

Selects all elements with a lang attribute value starting with "en"

Answer 1

I think the official description in the w3c document says it all:

E[foo|="en"] - an E element whose foo attribute value is a hyphen-separated list of values beginning with en

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

W3Schools documentation is imprecise at times, so for good documentation either go to MDN, or Sitepoint or use the official W3C Document.

Basically the |= selector matches words optionally immediately followed by a hyphen (- or U+002D respectively) and is useful with compound-classes and languages attributes.

<div class="wrapper-inner"><span lang="en-GB">...</span></div>

div[class|='wrapper']{/*...*/}
span[lang|='en']{/*...*/}

^= is a bit more general, basically a "substring match" and behaves exactly like ^ in a regex would.

You can see the difference of how the two selectors match in the following example:

*{
color:red;
/* now, if |= or ^= selector fails, the color is red */
}

[class|=en],[class^=de]{
color:green;
}
div::after{content:"FAIL"}
[class|=en]::after,[class^=de]::after{content:"pass"}

<div class="en-US">Case 1.1: |=en matching "en-US": </div>
<div class="en">Case 1.2: |=en matching "en": </div>
<div class="en-">Case 1.3: |=en matching "en-": </div>
<div class="en,">Case 1.4: |=en matching "en,": </div>
<div class="english">Case 1.5: |=en matching "english": </div>
<div class="en ">Case 1.6: |=en matching "en ": </div>
<div class="de-DE">Case 2.1: ^=de matching "de-DE": </div>
<div class="de">Case 2.2: ^=de matching "de": </div>
<div class="de ">Case 2.3: ^=de matching "de ": </div>
<div class="deutsch">Case 2.4: ^=de matching "deutsch": </div>