Geek Answers Handbook

CSS selector, not a descendant

How to select images in this document that are not inside an element with a .todeep class? In the case below, you should select the second and third elements. I don’t know how deep the images will be after the todeep element.

<body> <div class="todeep"> <img> </div> <div> <img> <div> <img> <div class="todeep"> <img> <div> <img /> </div> </div> </div> </div> </body>

At first I thought of a simple solution: *: not (.todeep) img, but it will also display images that also have a "todeep" element among their ancestors.

+7
source share
1 answer

You will need to select all the images and then undo those that have a .todeep parent.

So instead

 img { background-color: blue; width: 20px; height: 20px; } *:not(.todeep) img { background-color: red; }

using

 img { background-color: red; width: 20px; height: 20px; } .todeep img { background-color: blue; }

(sample code taken from you jsfiddle )

+4
source

More articles:


All Articles