title: What is the difference between pipe (|) and caret (^) attribute selectors?
body: <p>At <a href="http://en.wikipedia.org/wiki/W3Schools" rel="noreferrer">W3Schools</a> they declare both <a href="http://www.w3schools.com/cssref/sel_attribute_value_lang.asp" rel="noreferrer"><code>|</code></a> and <a href="http://www.w3schools.com/cssref/sel_attr_begin.asp" rel="noreferrer"><code>^</code></a> to mean: <em>Select an element with an attribute <strong>starting</strong> with a specified value</em>.</p>
  
  <p>So what's the difference?</p>