How would i select images in this document that are not inside a element with a .todeep class? In the case below the second and the third element should be selected. I don't know how deep the images will be after a "todeep" element.
<body>
<div class="todeep">
<img>
</div>
<div>
<img>
<div>
<img>
<div class="todeep">
<img>
<div>
<img />
</div>
</div>
</div>
</div>
</body>
I first thought of a simple solution: *:not(.todeep) img, but this will also select images that have a non "todeep" element among their ancestors also.
You will have to select all images, and then negate the ones which have a .todeep
parent.
So instead of
img { background-color: blue; width: 20px; height: 20px; }
*:not(.todeep) img { background-color: red; }
use
img { background-color: red; width: 20px; height: 20px; }
.todeep img { background-color: blue; }
(example code borrowed from You's jsfiddle)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With