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

by

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.

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Is there a CSS selector for text nodes?
  3. Can CSS detect the number of children an element has?
  4. How do I select the “last child” with a specific class name in CSS? [duplicate]
  5. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  6. Can the :not() pseudo-class have multiple arguments?
  7. How to combine class and ID in CSS selector?
  8. :first-child not working as expected
  9. What is the difference between :first-child and :first-of-type?
  10. Does CSS have a :blur selector (pseudo-class)?
  11. Specify multiple attribute selectors in CSS
  12. Should I use single or double colon notation for pseudo-elements?
  13. How to make Internet Explorer 8 to support nth child() CSS element?
  14. CSS selector – element with a given child [duplicate]
  15. What does a[href^=”…”] do in CSS?
  16. Universal selector * and pseudo elements
  17. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  18. Browser support for CSS :first-child and :last-child
  19. CSS selector to get deepest element of specific class in the HTML tree
  20. CSS Specificity and Inheritance
  21. How do I get the nth child of an element using CSS2 selectors?
  22. Difference between the selectors div + p (plus) and div ~ p (tilde)
  23. What’s the difference between CSS3’s :root pseudo class and html?
  24. CSS 3 nth of type restricted to class [duplicate]
  25. CSS combinator precedence?
  26. nth-child for every two table rows
  27. Why are my CSS properties being overridden/ignored?
  28. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  29. CSS specificity or inheritance?
  30. What is the difference between pseudo-classes and pseudo-elements?

Leave a Comment