title: using attribute value of a parent in a child using CSS3 attr function
body: <p>I want to set a <code>data-index</code> value of a parent element on one of its (nested) children. Desired result: string "index" should appear around the <code>h2.heading</code>.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="foo" data-index="index"&gt;
      &lt;div&gt;
          &lt;h2 class="heading"&gt;&lt;span&gt;title&lt;/span&gt;&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (the first <code>data-index</code> rule works - but not in the right place):</p>
  
  <pre><code>div.foo[data-index] .heading span {
      display: none;
  }
  
  div.foo[data-index]::after { 
      content: attr(data-index);
      color: green;
  }
  
  div.foo[data-index] .heading::after { 
      content: attr(data-index);
      color: red;
      border: 1px solid red;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/jyxdoz" rel="noreferrer">http://codepen.io/anon/pen/jyxdoz</a></p>