奇数表示された子のスタイル

Question

表示される奇数（または偶数）の子供に（隠された子供を除いて）いくつかの特定のスタイルを適用する方法を探しています。 Optionnaly、隠された子供が表示されるときにそのスタイルが適用されると、それは完璧です！ここで

は、ライブサンドボックスです：http://jsfiddle.net/zrges/1/

そして、ここでは、私が視覚的に何をしたいです：http://jsfiddle.net/qJwFj/（もちろん、それが唯一の表示例ですが、私はそれのために書いた安っぽいコードの世話をしていない）

私はそれを扱う良い擬似クラス、cssセレクタでは管理できません。

私は

はどうもありがとうございました（より簡単ではありませんJS/PHP 1、）フルCSS/HTMLのソリューションを持っていることを望みます！

tr.sub { display: none; } 
​.color { background: blue; }​ 

JS：

テーブルの場合

Answer 1

、あなたは

tr:nth-child(even) { // your style } 
tr:nth-child(odd) { // your style} 

または

tr:nth-child(2n+0) { // your style } 
tr:nth-child(2n+1) { // your style} 

Answer 2

CSSを使用することができます

$(document).ready(function() { 
    $('table tr:visible:even').addClass('color'); 

    $('#toggle').click(function() { 
     $('table tr').removeClass('color'); 
     $('table tr.sub').toggle(); 
     $('table tr:visible:even').addClass('color'); 
    }); 
});​ 

Answer 3

これをチェックアウト：http://jsfiddle.net/qbXVV/18/

HTML：

<button id="toggle">Toggle it!</button> 
<table> 
    <tr class="sub"><td>Row 1</td></tr> 
    <tr class="tag"><td>Row 2</td></tr> 
    <tr class="sub"><td>Row 3</td></tr> 
    <tr class="tag"><td>Row 4</td></tr> 
    <tr class="sub"><td>Row 5</td></tr> 
    <tr class="tag"><td>Row 6</td></tr> 
    <tr class="sub"><td>Row 7</td></tr> 
</table>​ 

CSS：

 tr:nth-of-type(even),.bg { 
     background-color: gray; 
    } 

    .hidden { 
     display:none; 
    }​ 

JS：これは回数を尋ねてきた

$(document).ready(function() { 
$('#toggle').click(function() { 
    $('.tag').toggleClass("hidden"); 
    $(".sub:nth-child(4n+1)").toggleClass("bg"); 
}); 
});​