CSS3のattr関数を使用している子の親の属性値を使用

Question

その（ネストされた）子の1つに親要素の値をdata-indexに設定したいとします。希望の結果：h2.headingの周りに文字列 "index"が表示されます。

マークアップ：

<div class="foo" data-index="index"> 
    <div> 
     <h2 class="heading"><span>title</span></h2> 
    </div> 
</div> 

CSS（最初data-indexルールが動作します - ではなく、適切な場所で）：

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; 
} 

http://codepen.io/anon/pen/jyxdoz

Answer 1

あなたはこのCSSを使用することができます。

div.foo[data-index]::after, div.foo[data-index]::before { 
    content: attr(data-index); 
    color: green; 
} 

div.foo[data-index] .heading::after { 
    content: attr(data-index); 
    border: 1px solid red; 
} 

疑似要素の使用に注意してください。

私はこれがあなたが探していたものだと思います。

Answer 2

更新

この問題を回避するには、html要素に直接CSS変数を設定し、それを使用することができます。

---

div.foo[data-index] .heading span { 
 
    display: none; 
 
} 
 

 
div.foo[data-index] .heading::after { 
 
    content: var(--index); 
 
    color: red; 
 
    border: 1px solid red; 
 
}

<div class="foo" style="--index:'test';" data-index> 
 
    <div> 
 
    <h2 class="heading"><span>title</span></h2> 
 
    </div> 
 
</div>

元

が現在行わ（attrを述べたようにのみ電流素子上で動作）することができません。将来的には

、attr()はCSSの変数と組み合わせcontent、ほかのプロパティに使用することができたときに、この

div.foo[data-index] .heading span { 
 
    display: none; 
 
} 
 
div.foo[data-index] { 
 
    --index: attr(data-index); 
 
} 
 
div.foo[data-index] .heading::after { 
 
    content: var(--index); 
 
    color: red; 
 
    border: 1px solid red; 
 
}

<div class="foo" data-index="index"> 
 
    <div> 
 
    <h2 class="heading"><span>title</span></h2> 
 
    </div> 
 
</div>