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

J'ai une table à l'intérieur d'un tableau, et je veux remplir le fond de la dernière ligne du tableau 1 seulement — pas de table de 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 suis la coloration des deux dernières lignes de table1 et table2.

  • Ajouter une classe ou un attribut id unique pour délimiter les deux tables.
InformationsquelleAutor Roh-Land | 2013-04-15
  1. 65

    Vos tables doivent avoir immédiate comme les enfants, juste tbody et thead éléments, avec les lignes à l'intérieur*. Donc, modifier le code HTML pour être:

    <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>

    Ensuite modifier votre sélecteur légèrement à ceci:

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

    De les voir en action ici. Qui rend l'utilisation de la sélecteur d'enfant, dont:

    ...sépare les deux sélecteurs et correspond uniquement aux éléments appariés par le deuxième sélecteur de qui sont les enfants directs d'éléments appariés par le premier.

    Alors, vous êtes en ciblant uniquement les enfants directs d' tbody éléments qui sont eux-mêmes des enfants directs de votre #test table.

    Solution Alternative

    Ci-dessus est la plus élégante de la solution, que vous n'avez pas besoin de sur-monter tous les styles. L'alternative serait, pour coller avec votre configuration actuelle, et l'emporter sur le style de l'arrière de la table interne, comme ceci:

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

    * Il n'est pas obligatoire mais la plupart (tous?) les navigateurs ajouter ces dans le, il est donc préférable de le rendre explicite. Comme @BoltClock états dans les commentaires:

    ...c'est maintenant gravé dans la pierre en HTML5, donc pour un navigateur pour être conforme essentiellement, il doit se comporter de cette façon.

    • Si vous ne spécifiez pas un TBODY, le client sera en insérer une. Et si vous n'utilisez pas un THEAD ou TFOOT, les sélecteurs #test>tbody>tr:last-child et #test tr:last-child choisira la même ligne, ce dernier ayant une faible spécificité.
    • Sauf il y a une table interne - l'ex sélectionneur ne correspond pas à la tr:last-child dans ce tableau. Cela dit, vous avez raison, il n'est pas nécessaire d'ajouter explicitement tbody des balises pour le balisage.
    • yep, désolé, j'ai raté la deuxième > initialement. Mise à jour de la réponse et de violon.
    • est-il une raison pas pour l'ajouter dans tbody? Je suppose que je me sens plus à l'aise en le rendant explicite, pour éviter cette situation exacte lequel mon sélecteur(s) ne cible pas ce que j'attendais, parce qu'ils ont été ajoutés en silence.
    • Il n'y a pas de raison pas pour le faire, mais ce que je dis est simple: si vous avez une seule tbody pour tous vos rangs puis il ne fait aucune différence dans le comportement de savoir si ou de ne pas vous faire (et ce comportement est généralement fiable). C'est certainement une bonne pratique pour spécifier bien, surtout quand il s'agit de la sémantique.
    • eh bien, à moins que la performance est donc essentiel que l'omission de la tags permettrait de stimuler de manière significative les temps de chargement, mais c'est une autre question.
    • de sens, les acclamations. Pour quelqu'un (comme moi) qui ne connaissent pas, le comportement de l'ajout dans le tbody ne semble pas être compatible multi-navigateur (rapidement testé dans IE 8/9/10, Chrome & FF).
    • Yep, et comme une question de fait, il est maintenant gravé dans la pierre en HTML5, donc pour un navigateur pour être conforme fondamentalement doit se comporter de cette façon.

    InformationsquelleAutor CherryFlavourPez