Как применить стиль для последнего элемента с классом, если дальше есть другие элементы?

Question

[Амир]

Здравствуйте. Есть таблица:

<table>
            <thead>
                <tr>
                    <th class="show">One</th>
                    <th class="show">Two</th>
                    <th class="show">Three</th>
                    <th class="show">Four</th>
                    <th class="show">Five</th>
                    <th class="show">Six</th>
                    <th class="hide">Seven</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="show">1</td>
                    <td class="show">2</td>
                    <td class="show">3</td>
                    <td class="show">4</td>
                    <td class="show">5</td>
                    <td class="show">6</td>
                    <td class="hide">7</td>
                </tr>
                <tr>
                    <td class="show">1</td>
                    <td class="show">2</td>
                    <td class="show">3</td>
                    <td class="show">4</td>
                    <td class="show">5</td>
                    <td class="show">6</td>
                    <td class="hide">7</td>
                </tr>
                <tr>
                    <td class="show">1</td>
                    <td class="show" class="show">2</td>
                    <td class="show">3</td>
                    <td class="show">4</td>
                    <td class="show">5</td>
                    <td class="show">6</td>
                    <td class="hide">7</td>
                </tr>
                <tr>
                    <td class="show">1</td>
                    <td class="show">2</td>
                    <td class="show">3</td>
                    <td class="show">4</td>
                    <td class="show">5</td>
                    <td class="show">6</td>
                    <td class="hide">7</td>
                </tr>
        </tbody>
    </table>

body {
    margin: 0;
    background: #eee;
}

table {
    width: calc(100% - 40px);
    margin: 40px 20px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

table tbody tr {
    cursor: pointer;
    border-radius: 10px;
    z-index:0;
    position: relative;
}

table tbody tr:hover {
    box-shadow: 0 12px 10px 0 rgba(0,0,0,0.15);
    z-index: 100;
}

table tbody tr td {
    background-color: #fff;
    padding: 10px 20px;
    position: relative;
    z-index: -1;
}

table tbody tr > td:first-child {
    border-radius: 10px 0 0 10px;
}

/* Вот здесь загвоздка */
table tbody tr > td.show:last-child {
    border-radius: 0 10px 10px 0;
}

.hide {
  display: none;
}

Я хочу, чтобы обтекание (border-radius) было у крайнего элемента с классом .show. Но почему-то он не прорисовывается.
https://jsfiddle.net/74qcu8gt/14/
Что делать?

Заранее благодарен за ответы.

Answer 1

[Anton fon Faust]

Потому что, селекторы читаются с права на лево.
td.show:last-child дословно нужно читать так:
берем последнего дитяти, и применяем ему стиль "border-radius: 0 10px 10px 0;", если он к тому же еще имеет класс .show и является td и непосредственно вложен в tr, который вложен на любом уровне в tbody, который вложен на любом уровне в table.
Под конкретно эту задачу, можно использовать, например, такой селектор:
table tbody tr > td.show:nth-last-of-type(2)

Comments

[Амир]

Спасибо. Для этого примера действительно работает. А если ячеек будет неопределенное количество? Допустим

<tr>
                    <td class="show">1</td>
                    <td class="show">2</td>
                    <td class="show">3</td>
                    <td class="show">4</td>
                    <td class="show">5</td>
                    <td class="show">6</td>
                    <td class="hide">7</td>
                    <td class="hide">8</td>
                    <td class="hide">9</td>
                    <td class="hide">10</td>
...
                </tr>

[Павел Радьков]

Если поменять семантику и всем ячейкам .hide заменить td на th, то заработает :last-of-type для любого количества td и th элементов в строке.

Answer 2

[Егор Лавренов]

tr td .show:last-child

Comments

[Амир]

А Вы пробовали?