Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS selector, is no descendant of

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.

like image 994
Han Dijk Avatar asked Jan 09 '12 21:01

Han Dijk


1 Answers

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)

like image 56
Bergi Avatar answered Oct 12 '22 21:10

Bergi