Differencebetween Pipe (|) and Caret (^) Attribute Selectors

h1[rel^="friend"] { color: blue; }

<h1 rel="friend-external-sandwich">I'm Blue.</h1><h1 rel="friend2-external-sandwich">I'm Blue.</h1><h1 rel="external-sandwich">I'm Black.</h1>

What is the difference between | and ^ Selector?

You can check the difference by yourself. They both look for attribute values starting with some value. However, using |= you need the whole word (or the word separated by a hyphen - from the next word) to be selected. Example:

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

[class^="top"] will select the three of them.

[class|="top"] will select only the two first elements. The last <p> has the class topcontent and therefore the selector won't find the isolated word top

CSS Selector Clarification: |= vs ^=

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.

What's the difference between [attribute|=value] and [attribute^=value] CSS selectors?

MDN has the better description:

[attr|=value]

Represents an element with an attribute name of
attr. Its value can be exactly “value” or can begin with “value”
immediately followed by “-” (U+002D). It can be used for language
subcode matches.

[attr^=value]

Represents an element with an attribute name of attr
and whose value is prefixed by "value".

So [attr|=foo] would match attr="foo" or attr="foo-bar", but not attr="foobar".

[attr^=foo] on the other hand would match any of those.

The primary purpose of |= is, as described, for matching locale/language codes like en-us. Note that for languages specifically you should be using :lang() however, which is a lot more flexible.

What is the different between [att|=val] and [att~=val] in css

[attr|=val] matches a word in val in any form, so [class=div] would match .my-div, .div, but not .mydiv.

[attr~=val] matches a complete word in val, so [class~=div] would match .div, but not .mydiv or .my-div.

Example:

HTML

<div id="myDiv"></div>
<div id="myDiv2"></div>
<div id="new-div"></div>

CSS

div[id|=myDiv] {
  /* Matches the first div */
}
div[id|=my]{
  matches first two divs
}
div[id|=new]{
  /* Matches second div - the hyphen counts as a word separator */
}
div[id~=Div]{
  /* Matches nothing - "Div" is not a separate word */
}

CSS difference between attribute selectors with tilde and star?

The asterisk attribute selector *= matches any substring occurrence. You can think of it as a string contains call.

---