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
  • 665,005
  • 155
  • 1,345
  • 1,328
Han Dijk
  • 1,592
  • 1
  • 13
  • 20
  • possible duplicate of [Negative CSS selectors](http://stackoverflow.com/questions/726493/negative-css-selectors) – Neil Jan 09 '12 at 21:45

1 Answers1

6

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
  • 572,313
  • 128
  • 898
  • 1,281
  • 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