alex alex - 4 months ago 19
CSS Question

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

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

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>

Pipe (|): selects an element (<h1>) 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; }
<h1 rel="friend-external-sandwich">I'm Red.</h1>
<h1 rel="friend2-external-sandwich">I'm Black.</h1>

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