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

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -