CODEWITHSUNDEEP
csscss-selectors
Will Martin
Will Martin

Reputation: 4180

CSS - is there a cousin selector?

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?

Upvotes: 3

Views: 5794

Answers (2)

BoltClock
BoltClock

Reputation: 723428

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.

Upvotes: 2

Victor Bruno
Victor Bruno

Reputation: 1043

Reference: http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#selectors

No, there are only decendant and limited sibling selectors. You would have to use javascript to locate the element.

Upvotes: 1

Related Questions