css selectors - What is caret symbol ^ used for in css when selecting elements?

Question

I encountered a css selector in a file like this:

#contactDetails ul li a, a[href^=tel] {....}

question from:https://stackoverflow.com/questions/14130765/what-is-caret-symbol-used-for-in-css-when-selecting-elements

Answer 1

The circumflex character “^” as such has no defined meaning in CSS. The two-character operator “^=” can be used in attribute selectors. Generally, [attr^=val] refers to those elements that have the attribute attr with a value that starts with val.

Thus, a[href^=tel] refers to such a elements that have the attribute href with a value that starts with tel. It is probably meant to distinguish telephone number links from other links; it’s not quite adequate for that, since the selector also matches e.g. <a href="tel.html">...</a> but it is probably meant to match only links with tel: as the protocol part. So a[href^="tel:"] would be safer.