Take the 2-minute tour ×

I encountered a css selector in a file like this:

#contactDetails ul li a, a[href^=tel] {....}
share|improve this question
add comment

4 Answers

up vote 8 down vote accepted

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.

share|improve this answer
add comment

The carat "^" used like that will match a tags where the href starts with "tel" ( http://csscreator.com/content/attribute-selector-starts )

share|improve this answer
add comment


(^) means it selects elements that have the specified attribute with a value beginning/starting exactly with a given string.

Here it selects all the 'anchor' elements the value of href attribute starting exactly with a string 'tel'

share|improve this answer
@Yannis Dran have you got it? –  Codegiant Jan 3 '13 at 17:02
yes thank you all very much, I had got confused because into the html there was no value containing the string "tel". –  Yannis Dran Jan 3 '13 at 22:18
add comment

It means a tags whose href attribute begins with "tel"


<a href="tel123xxx">This is a link</a>

will match.

share|improve this answer
add comment

Your Answer


