So ändern Sie das CSS des untergeordneten Elements mithilfe des Attributselektors

Question

Ich möchte ein Div ausblenden, wenn es zu einem übergeordneten div gehört, für das das Attribut data-ontarget auf true festgelegt ist. Ich habe Folgendes versucht, aber nichts passiert.

Wenn ich den Klassennamen nach dem Attributselektor im folgenden Beispiel entferne, wird das gesamte Eltern-Div ausgeblendet. Der Attributselektor funktioniert also, aber nicht in Kombination mit der Suche nach einer Kindklasse.

Hier ist, was ich versuche: 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

mit display ersetzen Opazität Eigenschaft, um das Element zu verstecken.

.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

Ich glaube, Sie die richtige CSS fehlen, die div als versteckte Ihr Ziel macht.

Siehe Demo here.

finden Sie den Code unten:

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