0

I want to style an image that does not have an "aside" above it. I want the styling to apply to all img elements in something like this:

<div class='content'>
  (assorted other divs and containers in here)
  <img src='http://example.com'>
  (could be more <img> elements in here too)
</div>

But I do NOT want it to apply here:

<div class='content'>
  (assorted other divs and containers in here)
  <aside class='quote'>
    (assorted other divs and containers in here)
    <img src='http://example.com'>
  </aside>
</div>

This is the CSS I'm trying, but no luck...

.content :not(aside.quote) img { width:100%; }

Since there can be assorted other divs and containers in the structure, I can't assume the img will be the first child (or NOT the first child).

How can I get the right selector to do this?

Eric
  • 5,104
  • 10
  • 41
  • 70
  • 1
    `.content > img { ... }` ? – Turnip Apr 22 '20 at 12:43
  • No, it doesn't... I am showing some simplified code, there are more divs. I'll see if I can make it more clear. – Eric Apr 22 '20 at 12:46
  • 1
    Re. your edit; The `>` selector will still work in your updated example. – Turnip Apr 22 '20 at 12:49
  • Hi @turnip will it still work, even if the img element(s) are in more containers below `.content`? – Eric Apr 22 '20 at 12:52
  • 1
    Re. your other edit. To select one element out of an unknown selection of elements you would need to differentiate it somehow. Can't you add a class/id? Do you know what the src will be? – Turnip Apr 22 '20 at 12:52
  • 1
    If you know the src you can use an attribute selector `.content > [src="http://example.com"]` – Turnip Apr 22 '20 at 12:54

0 Answers0