At W3Schools they declare both |
and ^
to mean: Select an element with an attribute starting with a specified value.
So what's the difference?
See Question&Answers more detail:osCaret (^): 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>