Guedda
@Guedda
Начинающий front-end разработчик

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

Здравствуйте. Есть таблица:
<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/
Что делать?

Заранее благодарен за ответы.
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 2
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
Потому что, селекторы читаются с права на лево.
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)
Ответ написан
@EgorWeb
Верстальщик
tr td .show:last-child
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Biganto Москва
от 130 000 до 130 000 руб.
Soft Media Int. Пенза
от 125 000 до 225 000 руб.
15 авг. 2018, в 01:47
30000 руб./за проект
15 авг. 2018, в 01:09
70000 руб./в месяц
14 авг. 2018, в 22:43
350 руб./за проект