【css】特定のクラスを除いて5個目ごとに色を変える方法

Question

前提・実現したいこと

<table>内で特定クラスの<tr>を省いて数えて5個目ごとの<tr>の背景色を変えたいです。 <tr class="list">と<tr class="number">2つのクラスを持つ<table>で、 <tr class="list">だけを数えて5個目ごとに背景を変えたいのですが、方法が分かりません。 CSSでそのような設定は出来ないでしょうか？ 記述方法を教えていただきたいです。よろしくお願いします。

該当のソースコード

<table>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr><!--ここの色を変えたい-->
<tr class="number"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr><!--ここの色を変えたい-->
<tr class="number"></tr>
<tr class="list"></tr>
</table>

試したこと

CSSでtr:nth-of-type(5n)を設定すると最初の5個目は上手くいくのですが、どんどんズレてしまいます。

tr:nth-of-type(5n) {
  background-color: #F6F4F4;
}

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[emi_ono]

kei344さん、遅くなってしまいすみません。
ベストアンサーを選びました。
アドバイスありがとうございます！

Answer 1

nth-of-typeとclass指定を組み合わせた場合、まずは要素のn番目をピックアップ→指定したclassが付いているかどうかチェック、という順番で動くので、現状のCSSだけではちょっと実現が難しいです。

jQueryを使えば実現可能です。

codepenサンプル

.bg {
  background-color: #F6F4F4;
}

$('tr.list').each(function(i){
    if(((i+1)%5) == 0){
        $(this).addClass("bg");
    }
});

また、「:nth-child()のofフィルター」というのが新しいCSSの草案としてあるようです。現状はSafariのみで動く模様。
これが正式に採用されてほとんどのブラウザで動くようになれば、CSSだけで実現できそうですね。

tr:nth-child(5n of .list) {
  background-color: #F6F4F4;
}

要素の指定にもう迷わない？:nth-child()のofフィルターを使ったラクラク要素指定法

Selectors Level 4（W3C）

codepenサンプル
※Safariでアクセスすると5番目が赤くなります。

Comments

[emi_ono]

mai1210さん、ありがとうございます！！
教えていただいたjQueryの設定でうまくいきました。
ずっと悩んでいたので、とても助かりましたm(_ _)m
「:nth-child()のofフィルター」で実現できるとシンプルで分かりやすいですね。
ありがとうございます！

Answer 2

現状のCSSセレクタではできませんので、
background-colorを適用させるためのクラスを用意するのが無難かと。

<table>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list onBG"></tr><!--ここの色を変えたい-->
<tr class="number"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list"></tr>
<tr class="list onBG"></tr><!--ここの色を変えたい-->
<tr class="number"></tr>
<tr class="list"></tr>
</table>

.onBG {
  background-color: #F6F4F4;
}

Comments

[emi_ono]

miyabi_takatsukさん、ありがとうございます！
CSSだけでは難しいのですね。
<tr>がよく増減するので、自動で背景を反映させたいなと思い質問させていただきました。
回答ありがとうございます！！