Question

Suppose I have the following table (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>

The rows of the TBODY have been zebra striped using an :nth-child(2n) selector. But the background of the row in the TFOOT doesn’t get those styles, and breaks the even/odd striping any time the table has an even number of rows in the TBODY.

I’d like to select the TFOOT row with something like .data-table tbody tr:nth-child(2n):last-child + tr, but that won’t work. The + selector is for adjacent sibling elements that share a single parent element. The two TRs here aren’t siblings, they’re cousins.

I could use jQuery (something like $(".data-table tbody tr:nth-child(2n):last-child").parent().next().find("tr").css({"background-color": "blue"})). But I’d prefer a CSS solution if there is one.

So, is there any way to select an element’s cousin?

Answer 1

CSS works down the DOM (although selectors are processed backwards), so you can’t navigate up an element tree and then back down to reach an element’s cousin. You can only either operate on the same level of elements (only going forward), or go down.

You’ll have to go with your jQuery solution.