Difference between |= and ^= css
Please check following example. You will get better understanding between both selectors.
/* select all lang attribute starting with "en" */
[lang^=en] {
border: 1px solid red;
}
/* select all hyphen-separated lang attribute starting with "en" */
[lang|=en] {
background: yellow;
}<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en_gb">Ello!</p>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>