43

I encountered a css selector in a file like this:

#contactDetails ul li a, a[href^=tel] {....}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Yannis Dran
  • 1,479
  • 2
  • 18
  • 24

4 Answers4

48

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    this kinda oot, but what is the difference between `a[href^=tel]` and `a[href|=tel]` ? is there any diffence between `^` and `|` – Kevin Chandra Jun 23 '20 at 13:32
9
a[href^="tel"]

(^) 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'

Joundill
  • 6,828
  • 12
  • 36
  • 50
Codegiant
  • 2,110
  • 1
  • 22
  • 31
5

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

amelvin
  • 8,919
  • 4
  • 38
  • 59
4

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

Example:

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

will match.

abhi.gupta200297
  • 881
  • 6
  • 12