Comment sélectionner le "dernier enfant" d'un élément avec un nom de classe spécifique en CSS ?

Question

J'ai un tableau HTML et je veux que la dernière ligne, à l'exclusion de la ligne avec la classe .table-bottom et supprimer son border-bottom :

<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
    <tr class="table-top"><th style="width:40px;">ID</th> <th>Post title</th> <th>Date</th> <th>Owner</th> <th style="width:100px;">Actions</th></tr>
    <tr class="table-middle"><td>1</td> <td>Test</td> <td>16.7.2013</td> <td>Admin</td> <td>Delete</td></tr>
    <tr class="table-middle"><td>2</td> <td>Test 2</td> <td>3.8.2013</td> <td>Admin</td> <td>Delete</td></tr>
    <tr class="table-bottom"><td colspan="5"></td></tr>
</table>

.table tr th {
color:#929191;
font-weight:bold;
font-size:14px;
text-align:left;
padding-left:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr th:last-child {
border-right:none;
}
.table tr td {
color:#929191;
font-weight:bold;
font-size:12px;
padding:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr td:last-child {
border-right:none;
}
.table .table-middle:last-of-type td {
border-bottom:none;
background:red;
}
.table tr.table-middle td:first-child {
text-align:center;
}
.table tr th:first-child {
text-align:center;
padding-left:0px;
}
.table tr.table-bottom td {
border-right:none;
border-bottom:none;
}

Mais le .table .table-middle:last-of-type td Le sélecteur ne fonctionne pas.

Voici le Violon .

Des idées ?

Answer 1

Réponse courte : vous ne pouvez pas le faire par CSS, à moins de modifier votre structure HTML.

Plus de détails :

:last-of-type pseudo-classe, représente l'élément qui est le dernier frère ou sœur de son type dans la liste des enfants de son élément parent.

Considérez ce sélecteur : .table-middle:last-of-type .

tandis que .table-middle pointe correctement l'élément, l'élément qui a .table-middle n'est PAS le dernier membre de la famille de la classe type car le terme de type fait référence à l'élément HTML lui-même, et non à une combinaison de element.class .

---

Voici la solution qui fonctionne :

HTML

<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
    <thead>
        <tr>
            <th style="width:40px;">ID</th>
            <th>Post title</th>
            <th>Date</th>
            <th>Owner</th>
            <th style="width:100px;">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5"></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Test</td>
            <td>16.7.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Test 2</td>
            <td>3.8.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>        
    </tbody>
</table>

CSS

.table tbody tr:last-child td {
    border-bottom:none;
    background:red;
}

Voici le Violon

Answer 2

Vous pourriez faire beaucoup plus simple sans utiliser de classes du tout :

HTML :

<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

CSS :

table {
    width: 500px;
}
table td {  /* style for all the cells between the top and bottom row */
    background: red;
}
table tr:first-child td { /* style for the cells in the top row */
    background: green;
}
table tr:last-child td { /* style for the cells in the bottom row */
    background: blue;
}
table tr:first-child td:first-child, /* first row, first cell */
table tr:first-child td:last-child, /* first row, last cell */
table tr:last-child td:first-child, /* last row, first cell */
table tr:last-child td:last-child { /* last row, last cell */
    background: yellow;
}

Vérifiez également le travailler avec JSFiddle .