bg Bilder zu Kind divs innerhalb einer Tabelle

Question

Ich habe eine Tabelle, die drei divs enthält wie folgt:

<table class="launcherGrid"> 
<tbody> 
    <tr rowindex="0"> 
     <td> 
      <div class="app-launch "> 
       <i class="fa-launch fa-app"></i>aaa <span class="app-version"> 
        v0</span> <span class="app-description">111</span> 
      </div> 
     </td> 
    </tr> 
    <tr rowindex="1"> 
     <td> 
      <div class="app-launch "> 
       <i class="fa-launch fa-app"></i>bbb <span class="app-version"> 
        v0</span> <span class="app-description">222</span> 
      </div> 
     </td> 
    </tr> 
    <tr rowindex="2"> 
     <td> 
      <div class="app-launch "> 
       <i class="fa-launch fa-app"></i>ccc <span class="app-version"> 
        v0</span> <span class="app-description">333</span> 
      </div> 
     </td> 
    </tr> 
</tbody> 

Ich versuche, ein anderes Hintergrundbild zu jedem div über CSS anzuwenden, i kann den Quellcode nicht ändern.

Ich habe versucht, jeden zu lokalisieren, mit:

.launcherGrid div:nth-child(2) { 
    background: url(../img/icon-admin.png) right no-repeat; 
} 

aber modofies alle divs. Irgendein Vorschlag, wie dies nur in CSS getan werden kann.

Answer 1

Ziel der <tr> Nth-Kind dann Ihre App-Start-Klasse und es sollte funktionieren. Fiddle

.launcherGrid tr:nth-child(1) div.app-launch { 
 
    background: url('https://placehold.it/250x100') right no-repeat; 
 
    height: 100px; 
 
} 
 

 
.launcherGrid tr:nth-child(2) div.app-launch { 
 
    background: url('https://placehold.it/225x70') right no-repeat; 
 
    height: 70px; 
 
} 
 

 
.launcherGrid tr:nth-child(3) div.app-launch { 
 
    background: url('https://placehold.it/200x50') right no-repeat; 
 
    height: 50px; 
 
}

<table class="launcherGrid"> 
 
<tbody> 
 
<tr rowindex="0"> 
 
<td> 
 
<div class="app-launch "> 
 
<i class="fa-launch fa-app"></i>aaa 
 
<span class="app-version"> v0</span> 
 
<span class="app-description">111</span> </div> 
 
</td> 
 
</tr> 
 
<tr rowindex="1"> 
 
<td> 
 
<div class="app-launch "> 
 
<i class="fa-launch fa-app"></i>bbb 
 
<span class="app-version"> v0</span> 
 
<span class="app-description">222</span> 
 
</div> 
 
</td> 
 
</tr> 
 
<tr rowindex="2"> 
 
<td> 
 
<div class="app-launch "> 
 
<i class="fa-launch fa-app"></i>ccc 
 
<span class="app-version"> v0</span> 
 
<span class="app-description">333</span> 
 
</div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>

Answer 2

: n-te des Typs Werke das übergeordnete Element basiert.

Sie css funktionierte nicht, weil es nur ein div für jeden td gibt.

versuchen

.launcherGrid tr:nth-of-type(1){ 
    background: url(../img/icon-admin.png) right no-repeat; 
} 

statt. Dadurch können Sie auf einzelne Zeilen Ihrer Tabelle zielen.