CSS - есть селектор кузена?

Question

Предположим, у меня есть следующая таблица ( JS Fiddle ):

<table class="data-table">
<thead>
    <tr>
        <th scope="col">Method</th>
        <th scope="col">Price</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Pickup*</td>
        <td>no charge</td>
    </tr>
    <tr>
        <td>Campus mail</td>
        <td>no charge</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="2">* At 1st floor desk</td>
    </tr>
</tfoot>
</table>

Строки TBODY были разбиты на зебры с использованием селектора: nth-child (2n).Но фон строки в TFOOT не получает эти стили и прерывает чётное / нечетное чередование каждый раз, когда в таблице есть четное количество строк в TBODY.

Я бы хотел выбратьTFOOT строка с чем-то вроде .data-table tbody tr:nth-child(2n):last-child + tr, но это не сработает.Селектор + предназначен для смежных родственных элементов, которые совместно используют один родительский элемент.Два TR здесь не братья и сестры, они двоюродные братья.

I может использовать jQuery (что-то вроде $(".data-table tbody tr:nth-child(2n):last-child").parent().next().find("tr").css({"background-color": "blue"})).Но я бы предпочел решение CSS, если оно есть.

Итак, есть ли способ выбрать двоюродного брата элемента?

Answer 1

Ссылка: http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#selectors

Нет, существуют только дочерние и ограниченные селекторы. Вы должны будете использовать javascript, чтобы найти элемент.

Answer 2

CSS работает вниз по DOM (хотя селекторы обрабатываются в обратном направлении), поэтому вы не можете перемещаться вверх по дереву элементов и затем обратно вниз, чтобы добраться до двоюродного брата элемента.Вы можете работать только на одном и том же уровне элементов (только вперед) или идти вниз.

Вам придется использовать свое решение jQuery.