Hide first image inside a div where the image is not a direct child

Question

We are trying to hide all but the first image for each mydiv without hiding any of the text given the following html:

<div class="mydiv">
    <p>
        <img  src="http://placekitten.com/220/200" />
    </p>
    <p>text
        <img  src="http://placekitten.com/250/200" />
    </p>
    <p>
        <img src="http://placekitten.com/200/250" />
    </p>
    <h2>Text</h2>
</div>
<div class="mydiv">
    <p>
         text
    </p>
    <p>text
        <img src="http://placekitten.com/250/200" />
    </p>
    <p>
        <img  src="http://placekitten.com/200/250" />
    </p>
</div>

Here is an example on JSFiddle.

We would like to avoid altering the original html(because it is generated from a wiswig editor).
We cannot hide any of the text so hiding the entire paragraph is out of the question.

I basically want this functionality to work

div.mydiv p img ~ div.mydiv p img {
   display: none;
}

This does not work since the images are not direct siblings.

Answer 1

Why do you try a ~ ?

Is

.mydiv p img{ display:none; }

not sufficient ?

[EDIT] Sorry, didn't understood what you want,

try this

.mydiv p img{ display:none; }
.mydiv p:first-child img{ display:block; }