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

Question

We are trying to hide everything except the first image for each mydiv , without hiding any text listed below 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 a JSFiddle example.

We would like to avoid changing the original html (because it was created from the wiswig editor).
We cannot hide any text, so the exclusion of the whole paragraph is out of the question.

Mostly I want this functionality to work

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

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

Answer 1

Why are you trying to execute ~?

there is

 .mydiv p img{ display:none; } 

not enough?

[EDIT] Sorry, I don’t understand what you want,

try it

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

Answer 2

use this css, it will work 100% correctly. I have tried this.

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