web-dev-qa-db-fra.com

Sélecteur CSS dernière ligne de la table principale

J'ai un tableau à l'intérieur d'un tableau et je veux remplir l'arrière-plan de la dernière ligne du tableau 1 uniquement - pas le tableau 2.

<style> 
#test tr:last-child
{
  background:#ff0000;
}
</style>

<table border="1" width="100%" id="test">
<tr>
 <td>
  <table border="1" width="100%">
   <tr>
    <td>table 2</td>
   </tr>
  </table>
 </td>
</tr> 

<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>

</table>

Avec mon CSS, je colorie les deux dernières lignes de table1 et table2.

htmlcsscss-selectors
28
Roh-Land

Vos tables doivent avoir comme enfants immédiats uniquement les éléments tbody et thead, avec les lignes entre *. Donc, modifiez le HTML pour qu'il soit:

<table border="1" width="100%" id="test">
  <tbody>
    <tr>
     <td>
      <table border="1" width="100%">
        <tbody>
          <tr>
            <td>table 2</td>
          </tr>
        </tbody>
      </table>
     </td>
    </tr> 
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
    <tr><td>table 1</td></tr>
  </tbody>
</table>

Modifiez ensuite légèrement votre sélecteur:

#test > tbody > tr:last-child { background:#ff0000; }

Voyez-le en action ici . Cela utilise le sélecteur d'enfant , qui:

... sépare deux sélecteurs et correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondant au premier.

Ainsi, vous ne ciblez que les enfants directs d'éléments tbody qui sont eux-mêmes des enfants directs de votre #test table.

Solution alternative

Ce qui précède est la solution la plus intéressante, car vous n'avez pas besoin de passer outre les styles. L'alternative serait de s'en tenir à votre configuration actuelle et de remplacer le style d'arrière-plan du tableau intérieur, comme ceci:

#test tr:last-child { background:#ff0000; }
#test table tr:last-child { background:transparent; }

* Ce n'est pas obligatoire, mais la plupart (tous?) Les navigateurs les ajouteront, il est donc préférable de les rendre explicites. Comme l'indique @BoltClock dans les commentaires:

... il est désormais figé dans HTML5, donc pour qu'un navigateur soit conforme, il doit fondamentalement se comporter de cette façon.

63
CherryFlavourPez