属性セレクタを使用して子要素のCSSを変更する方法

Question

divを、属性data-ontargetがtrueに設定されている親divに属しているときにdivを非表示にしたいとします。 私は以下を試みましたが、何も起こりません。

下の例で属性セレクタの後にクラス名を削除すると、親div全体が非表示になります。したがって、属性セレクタは機能しますが、子クラスの検索と組み合わせることはできません。ここで

は、私が試したものです： HTML：

<div class="myClass" data-ontarget="false"> 
     <img src="myImage1.png"/> 
     <div class="myImage">This is my image 1</div> 
</div> 
<div class="myClass" data-ontarget="true"> 
     <img src="myImage2.png"/> 
     <div class="myImage">This is my image 2</div> 
</div> 

CSS：

[data-ontarget="true"] .myImage{ 
    display: none; 
} 

Answer 1

は、要素を非表示にするdisplayと不透明度プロパティを置換します。

.input_container[data="true"] .awsome_input_border{ 
 
    opacity: .5; 
 
} 
 
.input_container[data="false"] .awsome_input_border{ 
 
    opacity: 1; 
 
}

<div class="input_container" data="true"> 
 

 
<span class="awsome_input_border"/> 
 
hide me!! 
 
</div> 
 
<div class="input_container" data="false"> 
 

 
<span class="awsome_input_border"/> 
 
hide me!! 
 
</div>

Answer 2

私はあなたが隠されたとして、あなたのターゲットdivを行い、適切なCSSを、欠けていると思います。

デモhereを参照してください。

以下のコードを見つけてください：

HTML：

<div class="parent"> 
    <div class="myClass" data-ontarget="false"> 
    <img src="myImage1.png" /> 
    <div class="myImage">This is my image 1</div> 
    </div> 
    <div class="myClass" data-ontarget="true"> 
    <img src="myImage2.png" /> 
    <div class="myImage">This is my image 2</div> 
    </div> 
</div> 

CSS：

.parent > div[data-ontarget="true"] { 
    display: none; 
}