title: Can a CSS selector reference another selectors property?
body: <p>I've just noticed that Webkit now has some support regarding the <a href="http://www.w3.org/TR/2012/WD-css3-values-20120308" rel="nofollow noreferrer">CSS Values and Units Module Level</a> spec. And I was wondering if anyone knows if there is a way to reference another CSS selectors (or DOM style) property from a CSS selector?</p>
  <p>I'm expecting something like <a href="https://stackoverflow.com/questions/10751966/import-css-selector-styles-in-another-selector-not-import">this</a> to be the answer here. Which I know is most likely the case for current browser implementations; but please keep reading...</p>
  <p>For instance, in the case where an animation might resize an element (<strong>NOTE</strong> the <code>${.element2.width}</code> is  fictitious syntax):</p>
  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
  .element1 {
    .width: /*-webkit-,-o-,-moz-*/calc(80% - ${.element2.width});
  }
  .element2 {
    .width: 100px;
  }
  .element2:hover {
    width: 200px;
    transition: all 0.4s ease-in-out;
  }
  &lt;/style&gt;
  </code></pre>
  <p>In this case I would expect the .element1's width to be re-evaluated based off the transition triggered from the hover events on .element2.</p>
  <p>I realize that the aforementioned spec. is only a working draft but perhaps the syntax for referring to such a 'referential selector property' is defined within another spec. which I'm yet to discover? Or simply just not a case for concern (thanks to an overlooked work around)?</p>