css - :first-child isn't working when targeting element using a descendant selector -

for reason, not able select first occurrence of img element inside div class productdescription.

is because img within p every time? img has nested within p every time, unfortunately, wordpress.

here html:

  <div class="productdescription"><h3>product description</h3>     <p>         <img class="alignleft" src="#">     </p>     <p>text here.</p>     <p>         <a href="#">             <img class="alignleft" src="#">         </a>         <a href="#">             <img class="alignleft" src="#">         </a>         <a href="#">             <img class="alignleft" src="#">     </p> </div> 

and css:

 .productdescription img {         float:left;         width:30%;         height:auto;         margin:10px 20px 20px 0px;  }  .productdescription img:first-child  {     width:45%;     border-style:solid; } 

the problem:

using descendent selector here cause css style target img:first-child of each descendant element.

for example, if have following markup:

<div class="productdescription">    <p>      <img class="alignleft" src="#" class="targetsme"> <!-- selected -->    </p>    <p>      <a href="#">        <img class="alignleft" src="#" class="targetsme"> <!-- -->      </a>      <a href="#">        <img class="alignleft" src="#" class="targetsme"> <!-- , -->        <img class="alignleft" src="#"> <!-- not -->      </a>    </p> </div> 

your current selector, .productdescription img:first-child, target every img have denoted class targetsme.

here's jsfiddle showing that.

---

the solution:

in case, image want target direct decsendant of p element, select so: .productdescription p > img:first-child

jsfiddle example here.