CSS - 사촌 선별기가 있습니까?

은 가정하자 나는 다음과 같은 테이블 (JS Fiddle)가 : n 번째 자녀 (2N) 선택하십시오 TBODY의CSS - 사촌 선별기가 있습니까?

<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>

행은을 사용하여 줄무늬 얼룩말왔다. 그러나 TFOOT의 행 배경은 그 스타일을 얻지 못하고 테이블에 TBODY의 짝수 행이있을 때마다 짝수/홀수 스트라이핑을 중단합니다.

TFOOT 행을 .data-table tbody tr:nth-child(2n):last-child + tr과 같이 선택하고 싶지만 작동하지 않습니다. + 선택자는 단일 상위 요소를 공유하는 인접한 형제 요소 용입니다. 여기에있는 두 TR은 형제가 아니며 사촌입니다.

은 (예 : $(".data-table tbody tr:nth-child(2n):last-child").parent().next().find("tr").css({"background-color": "blue"})과 같은) jQuery를 사용할 수 있습니다. 그러나 CSS 솔루션이있는 경우 CSS 솔루션을 선호합니다.

그래서 요소의 사촌을 선택할 수있는 방법이 있습니까?

출처

2011-08-03 Will Martin

tfoot 행을 본문으로 옮길 수 있습니까? – jdigital

거기에 속하지 않는 것을 제외하고는 ...하지만 나는 그것을 말함으로써 의미론이 너무 까다 롭습니다. – BoltClock

이렇게하면이 표가 수정되지만 CSS는 이러한 기능이 많은 사이트에서 더 광범위하게 사용됩니다. 아마 JS로 고쳐 버릴거야. –