如何使用属性选择器更改子元素的CSS

Question

I want to hide a div when it belongs to a parent div which has the attribute data-ontarget set to true. I tried the following, but nothing happens.

If I remove the class name after the attribute selector in the example below, the whole parent div becomes hidden. So the attribute selector works, but not in combination with the search for a child class.

Here is what I tried: 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

Replace opacity property with display to hide the element.

 .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

I think you are missing the proper CSS, which makes your target div as hidden.

Refer to the demo here .

Please find the code below:

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