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.


Comments

Post a Comment

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

i have android application, want convert blackberry 10 , google map needed in app,but blackberry 10 not support googlemap , blackberry developer web site supply way replace it.the sample below: @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); webview webview = (webview) findviewbyid(r.id.mywebview); webview.getsettings().setjavascriptenabled(true); webview.loadurl("http://maps.google.com/?ll=36.97, -122&lci=bike&z=13&t=p"); } i cannot understand it,i not know how add multiple markers on googlemap via url? can me? this worked me map shown in webview.
Read more

php - guestbook returning database data to flash -

i've been struggling problem long , unable make work, hope can me it. first, know php files correct , mysql database works fine. in flash, able submit comment database comments not display. did many tests such making returned_database flash separately , worked fine - can see old comments. long combine submitting 1 , returning 1 together, flash doesn't show comments more. put lower version flash effects on frame thinking doesn't collaborate returning flash, submitting flash works fine. since pretty complex problem hard me copy actionscript code because on different frames in flash. if has ideas fixing maybe can send file you?
Read more

java - Using an Integer ArrayList in Android -

i needing creating arraylist , adding integers them. essentially, have card game pulls card , saves id (bcid). want add pulled id arraylist, can avoid pulling same card twice. have setup below, keep getting duplicates. know cards pulling correctly, displays fine - repeated cards, unfortunately. any can provide great! have done best include relevant parts. if need additional information, let me know. public static integer bcid1, bcid2, bcid3, bcid4, bcid5, bcdcid; public static list<integer> usedcards = new arraylist<integer>(); in example below, supposed detect duplicate initialize sequence draw different card. public static void setids() { try { bcid1 = integer.parseint(bc1); usedcards.add(bcid1); } catch(numberformatexception nfe) { } try { bcid2 = integer.parseint(bc2); if (usedcards.contains(bcid2)) { try { bluecard2(ctx); } ...
Read more