Using css only, how to select html elements inside a div/class but exclude some nested div/classes -
here simplified page struture, want select images inside "page"-div , enclosed elements, not in either "keepoffa" or "keepoffb".
<!doctype html> <html lang="en"> <body> <div class="page"> <img/> <!-- ok --> <div class="keepoffa"> <img/> <!-- never take this--> </div> <div class="keepoffb"> <img/> <!-- never take this--> </div> <img/> <!-- ok --> <div class="subpage"> <img/> <!-- ok --> <ul> <li> <img/> <!-- ok --> </li> </ul> </div> <ul> <li> <img/> <!-- ok --> </li> </ul> <div> </body> </html>
here's have thought:
.page img:not(.keepoffa):not(.keepoffb) { max-width: 300px; }
but unwanted divs not excluded.
how select images exclude images inside unwanted divs? css-only required.
use >
operator select child of .page
div. , .subpage img
image
.page > img, .subpage img{ border: 1px solid red; }
<div class="page"> <img src="http://placehold.it/100x100"/> <!-- ok --> <div class="keepoffa"> <img src="http://placehold.it/100x100"/> <!-- never take this--> </div> <div class="keepoffb"> <img src="http://placehold.it/100x100"/> <!-- never take this--> </div> <img src="http://placehold.it/100x100"/> <!-- ok --> <div class="subpage"> <img src="http://placehold.it/100x100"/> <!-- ok --> </div> <div>
Comments
Post a Comment