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 differe

Answer 1

Caret (^): selects an element (

) where the value of the specified attribute (rel) starts with a certain value (val):

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

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

I'm Blue.
I'm Blue.
I'm Black.

Pipe (|): selects an element (

) where the value of the specified attribute (rel) is either exactly the value (val) or starts with the value immediately followed by - (val-):

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

h1[rel|="friend"] { color: red; }

I'm Red.
I'm Black.

More information about this selectors you can find here: https://css-tricks.com/attribute-selectors/ or on the official CSS specification: https://www.w3.org/TR/css3-selectors/#attribute-selectors