8

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Han Dijk
  • 1,602
  • 1
  • 14
  • 20
  • possible duplicate of [Negative CSS selectors](http://stackoverflow.com/questions/726493/negative-css-selectors) – Neil Jan 09 '12 at 21:45

1 Answers1

7

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)

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • 1
    That's for `img` children only, not descendants at any level. Replace the child selector with the descendant selector. – BoltClock Jan 10 '12 at 04:01