What is the difference between pipe (|) and caret (^) attribute selectors?

by

Caret (^): 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>

Pipe (|): selects an element (<h1>) where the value of the specified attribute (rel) is either exactly the value (val) or starts with the value immediately followed by - (val-):

h1[rel|="val"] { /**formatting */ }


h1[rel|="friend"] { color: red; }
<h1 rel="friend-external-sandwich">I'm Red.</h1>
<h1 rel="friend2-external-sandwich">I'm Black.</h1>

More information about this selectors you can find here: https://css-tricks.com/attribute-selectors/ or on the official CSS specification: https://www.w3.org/TR/css3-selectors/#attribute-selectors

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Can CSS detect the number of children an element has?
  3. How do I select the “last child” with a specific class name in CSS? [duplicate]
  4. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  5. How to combine class and ID in CSS selector?
  6. :first-child not working as expected
  7. What is the difference between :first-child and :first-of-type?
  8. Does CSS have a :blur selector (pseudo-class)?
  9. Specify multiple attribute selectors in CSS
  10. Should I use single or double colon notation for pseudo-elements?
  11. How to make Internet Explorer 8 to support nth child() CSS element?
  12. What does a[href^=”…”] do in CSS?
  13. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  14. Is it possible to use a CSS wildcard in the middle of an attribute selector?
  15. CSS selector to get deepest element of specific class in the HTML tree
  16. CSS Specificity and Inheritance
  17. Zebra striping a table with hidden rows using CSS3?
  18. Vertically centering content of :before/:after pseudo-elements
  19. Difference between the selectors div + p (plus) and div ~ p (tilde)
  20. Are CSS selectors case-sensitive?
  21. Combining :not() selectors in CSS
  22. Select an element with empty class attribute (class=””) using CSS?
  23. How do I target elements with an attribute that has any value in CSS?
  24. CSS combinator precedence?
  25. What is caret symbol ^ used for in css when selecting elements?
  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