title: How do I use an elements' attribute value as a css property? CSS3
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;canvas id="canvas" width="800" height="600"&gt;
  &lt;/canvas&gt;
  
  &lt;div class="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.content {
    :root {
      --xPos: canvas[id="canvas"].width/2;
  }   
    position: absolute;
    left: var(--xPos);
    bottom: 100px;
  }
  </code></pre>
  
  <p>I tried using an attribute selector to get the canvas.id.width value so I can set the left margin edge property for div.content to the canvas' width/2. 
  However, it seems like attribute selectors are used to style elements with specific attributes/values rather than to return an attribute value.</p>
  
  <p>is there a way(function/method) to use a HTML attribute value as a property value within CSS? and then use it in expressions like in JS such as attrValue*2 or attrValue/2. </p>
  
  <p>Thanks.</p>