css - What is the difference between pipe (|) and caret (^) attribute selectors?

Question

At W3Schools they declare both | and ^ to mean: Select an element with an attribute starting with a specified value.

So what's the difference?

Answer 1

Caret (^): selects an element (<h1>) where the value of the specified attribute (rel) starts with a certain value (val):

h1[rel^="val"] { /** formatting */ }

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>