1つのテーブル内の異なるクラス名の行に対して2番目のnth-child（オッズ）

Question

テーブルには50個のエントリがあり、その中には「イベント」または「コメント」というクラスがあります。ここでは、テーブルの行エントリがどのように見えるかです：

イベント、コメント、イベント、コメント、コメント、コメント、イベント

私は何をしたいことは「イベント」と「コメントの両方の代替行の色です'クラス名は別々です。現在、私が持っていることは、これは次のとおりです。

ブラック（イベント）、ホワイト（コメント）、ブラック（イベント）、ホワイト（コメント）、ブラック（：このコードで

tr.event:nth-child(odd) { 
    background-color: #000; 
} 
tr.comment:nth-child(odd) { 
    background-color: #000; 
} 

、私はの出力を取得します

ブラック（イベント）、ブラック（コメント）、ホワイト（イベント）、ホワイト（コメント）、ブラック（：コメント）、ホワイト（コメント）、ブラック（イベント）

私は出力がこのようにしたいですコメント）、白（コメント）、黒（イベント）

何か助けが素晴らしいだろう！

Answer 1

純粋なCSSではできないと思います。

同じ問題に非常に良い返事はここで見つけることができます：私はお勧めは何Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

は次のようになります。それに応じて各奇数要素とスタイルに1つの新しいクラスを追加します。

あなたがそうでない場合その他、各種

.comment 
.event 
.comment.odd 
.event.odd 
.event 
.event.odd 
.comment 

を持つことになりますので、あなたは、JSを使用してそれを行うことができます。しかし、余分なクラスのメソッドは十分に良いはずです。

Answer 2

本質的に階層データではないものを、非階層的なHTML構造で表現しようとしています。 nth-childは、親クラス内の子の順番を指し、共有クラスを持つすべての子クラス内ではありません。基本的に、CSSではこれを行うことはできません。

は、可能な場合は、このようなあなたのHTMLを構築してみてください。あなたはイベントと同じ色でコメントを開始したいように見えるので

<div> 

    <div class="event"> 
    <div class="comment"></div> 
    </div> 

    <div class="event"> 
    <div class="comment"></div> 
    <div class="comment"></div> 
    <div class="comment"></div> 
    </div> 

    <div class="event"> 
    </div> 

</div> 

今、あなたは

.event:nth-child(odd) { color: white; } 
.event:nth-child(even) { color: black; } 
.comment:nth-child(odd) { color: white; } 
.comment:nth-child(even) { color: black; } 

でこれをスタイルすることができますそれはあなたがする必要があるだろうの一部で、次のとおりです。

.event:nth-child(odd) { color: white; } 
.event:nth-child(odd) .comment:nth-child(odd) { color: white; } 
.event:nth-child(odd) .comment:nth-child(even) { color: black; } 

.event:nth-child(even) { color: black; } 
.event:nth-child(even) .comment:nth-child(odd) { color: black; } 
.event:nth-child(even) .comment:nth-child(even) { color: white; } 

上記の使用div要素。そして、書き込み

<table> 

    <thead><tr><td>Event</td></tr></thead> 
    <tbody> 
    <tr><td>Comment</td></tr> 
    </tbody> 

    <thead <tr><td>Event</td></tr></thead> 
    <tbody> 
    <tr><td>Comment</td></tr> 
    <tr><td>Comment</td></tr> 
    <tr><td>Comment</td></tr> 
    </tbody> 

    <thead><tr><td>Event</td></tr></thead> 

</table> 

：あなたは本当にテーブルでこれを行うにしたい場合しかし、あなたは以下のHTMLを使用してみてください可能性があり、その後、上記のように、論理の同じ種類を使用し

thead:nth-of-type(odd) { color: white; } 
tbody:nth-of-type(even) tr:nth-child(odd) { color: white; } 
tbody:nth-of-type(odd) tr:nth-child(event) { color: black; } 

thead:nth-of-type(even) { color: black; } 
tbody:nth-of-type(even) tr:nth-child(odd) { color: black; } 
tbody:nth-of-type(odd) tr:nth-child(event) { color: white; } 

Answer 3

それは不可能です純粋なCSSでは、クラス（または、必要に応じてスタイルを直接）を追加するためにjQueryを使用する必要があります。

jQueryのインデックス作成は0から始まります。したがって、それは考慮されるものとして、私たちは奇数とみなします。

色が緑色で追加されているため、セル内の内容を確認できます。

$('table').each(function() { 
 
    $('tr.comment:even').addClass('odd'); 
 
    $('tr.event:even').addClass('odd'); 
 
});

tr.comment.odd { 
 
    background-color: #000; 
 
} 
 

 
tr.event.odd { 
 
    background-color: #000; 
 
} 
 

 
table { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="event"> 
 
    <td>event</td> 
 
    </tr> 
 
    <tr class="comment"> 
 
    <td>comment</td> 
 
    </tr> 
 
    <tr class="event"> 
 
    <td>event</td> 
 
    </tr> 
 
    <tr class="comment"> 
 
    <td>comment</td> 
 
    </tr> 
 
    <tr class="comment"> 
 
    <td>comment</td> 
 
    </tr> 
 
    <tr class="comment"> 
 
    <td>comment</td> 
 
    </tr> 
 
    <tr class="event"> 
 
    <td>event</td> 
 
    </tr> 
 
</table>