如何使用CSS在另一个div内的div内调整图像大小？

Question

I want to only resize images that are in a div with a specific class, inside an other div with an other specific class. but the images which are only inside the div which is inside the other div should not be resized.

This works if I want to resize images inside a classed div:

div.classname>img { width:something; }

but this doesn't work:

div.classname2 > div.classname > img { width:something; }

Markup

<div class="classname2">
    <div class="classname">
        <img>
    </div>
</div>

But I can't refer to it with the inside class name.

So, to make it really clear, i need to resize these images:

<div class="classname2">
    <div class="classname">
        <img>
    </div>
</div>

But not these:

<div class="classname">
    <img>
</div>

Answer 1

I think this should work

CSS

.classname2 .classname img { width: 200px; }

Answer 2

I feel like your css rule should work

div.classname2 > div.classname > img { width:something; }

Does this fiddle show what you're trying to illustrate? If so, perhaps you just have overriding CSS rules somewhere?

Answer 3

Having:

<div class="parentDiv">
    <img class="img1">
    <div class="childDiv">
        <img class="img2">
    </div>
</div>

do it like this:

.parentDiv > img { width: 100px }

will just effect <img> s having class="img1" not those having class="img2"

Answer 4

Edit the only the single image you want without changing the rest, by going to that specific tag and putting the following style attributes.

<img class = "example" style = "width: 50px !important;">

UPDATE

Give this a try, add "!important" to the inside class to override the parent.

div.classname2 > div.classname > img { width:something !important; }