Using css only, how to select html elements inside a div/class but exclude some nested div/classes

Question

Here is a simplified page struture, where I want to select all images inside the "page"-div and enclosed elements, but not those that are 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 what I have thought:

.page img:not(.keepoffa):not(.keepoffb) {
    max-width: 300px;        
}

But the unwanted divs are not excluded.

How to effectively select the images but exclude the images inside those unwanted divs? CSS-only required.

Ferrmolina · Accepted Answer · 2016-02-05 15:39:01Z

1

Use > operator to select the child of .page div. And .subpage img to the another 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>

answered Feb 5, 2016 at 15:39

Ferrmolina

2,7692 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marcel Over a year ago

Thanks, that is a good idea. Unfortunately, the real page is more complicated than my simplified example above. Thus, working with immediate children selectors does not work that easy. I would have to include paths for every possible layout path. This will get too complicated. I will update the example a bit to represent this better.

General_Twyckenham · Accepted Answer · 2016-02-05 15:15:04Z

0

You can't use two pseudo-selectors simultaneously (and your selectors weren't correct anyway).

EDIT: Probably the easiest way is something like this:

    .page img {
        max-width: 300px;
    }

    .keepoffa img, .keepoffb img {
        max-width: initial;
    }

edited Feb 5, 2016 at 15:15

answered Feb 5, 2016 at 14:39

General_Twyckenham

2,2612 gold badges22 silver badges37 bronze badges

5 Comments

Mike Jerred Over a year ago

this also needs .page > img added on

General_Twyckenham Over a year ago

@PraveenKumar Yep :) CSS is often quite funky

General_Twyckenham Over a year ago

@Mike Yep you're correct - misread his original question. Going to update my answer when I get a chance

Marcel Over a year ago

Hm, this seems not to exactly work, since it an image is only inside one of them, it still gets selected with the other one.

General_Twyckenham Over a year ago

@Marcel Oh yes, I forgot about that. I ran into a similar issue a few months back. Let me re think this

Arman Ozak · Accepted Answer · 2016-02-05 15:33:11Z

0

Try this:

.page>img,
.page div:not(.keepoffa):not(.keepoffb) img {
    max-width: 300px;        
}

answered Feb 5, 2016 at 15:33

Arman Ozak

2,34413 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using css only, how to select html elements inside a div/class but exclude some nested div/classes

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related