title: Change CSS based on an element's width
body: <p>Is there a <strong>pure CSS</strong> way of specifying different CSS styles for an element, only active when it's, let's say, under a certain width?</p>
  
  <p>Similar to an @media query, but not the whole screen, just the element. Something like...</p>
  
  <pre><code>.element {background: blue;}
  .element[max-width=300] {background: red;}
  </code></pre>
  
  <p>I know how I'd do it with JavaScript, but that sounds so overly complicated... >.&lt;</p>