[css]tableのtr、10行ごとに背景色をつける方法

特定クラスのtrだけを数えて10行ごとに背景色をつけたいのですが、思ったような結果にならず悩んでいます。

<table>タグの<tbody>内に、
①<tr class="pickup">②<tr class="number">③<tr class="list">
という3種類のクラス名をつけた<tr>があります。

ーーーーーーーーーー
1行目：<tr class="pickup">○○</tr>
2行目：<tr class="pickup">○○</tr>
3行目：<tr class="pickup">○○</tr>
4行目：<tr class="pickup">○○</tr>
5行目：<tr class="pickup">○○</tr>
6行目：<tr class="pickup">○○</tr>
7行目：<tr class="pickup">○○</tr>
8行目：<tr class="pickup">○○</tr>
9行目：<tr class="number">○○</tr>
10行目：<tr class="list">○○</tr>
11行目：<tr class="list">○○</tr>
12行目：<tr class="list">○○</tr>
13行目：<tr class="list">○○</tr>
14行目：<tr class="list">○○</tr>
15行目：<tr class="list">○○</tr>
16行目：<tr class="list">○○</tr>
17行目：<tr class="list">○○</tr>
18行目：<tr class="list">○○</tr>
19行目：<tr class="list">○○</tr>
20行目：<tr class="list">○○</tr>
・
・
・
ーーーーーーーーーー

1行目から9行目の<tr class="pickup">や<tr class="number">はカウントせず、10行目の<tr class="list">から数えて10行目ごとに（最初は19行目）に色をつけたいのですが、cssで

#list-table tbody .list:nth-of-type(10n){
background-color: #F6F4F4;
}

と設定すると10行目に背景色がついてしまい、19行目にはつきません。
class="list"だけをカウントし、10行ごとに背景色をつけるにはどのように設定するのでしょうか？
20行目以降にもclass="pickup"やclass="number"を設定したtrが所々に入っています。
それはとばしてclass="list"だけ10行ごとに背景色を設定したいです。

質問の仕方が下手で申し訳ありません。
cssの設定方法などご教授をおねがいします。

質問者からの補足コメント

• 

  ありがとうございます！
  20行目以降は↓の用な感じで<tr class="list">○</tr>の間に<tr class="number">○</tr>が不規則にはいります。
  20行目：<tr class="list">○</tr>
  21行目：<tr class="list">○</tr>
  22行目：<tr class="list">○</tr>
  23行目：<tr class="number">○</tr>
  24行目：<tr class="list">○</tr>
  25行目：<tr class="list">○</tr>
  26行目：<tr class="number">○</tr>
  27行目：<tr class="list">○</tr>
  28行目：<tr class="list">○</tr>
  ・
  ・
  :nth-of-typeでは設定難しそうですね。ありがとうございます。

    補足日時：2019/04/19 17:21

• 

  ありがとうございます！javascriptだとできるんですね。
  javascriptを使って実現させたいのですが、javascriptはサンプルコードをコピペして使う程度で、知識がないです。
  「javascript　10個おきに設定」とか「javascript　table」などで検索してみたのですが…なかなか難しいです。検索るす時のヒントなどあれば教えていただけると嬉しいです。
  自分でももう少し調べてみたいと思います。ありがとうございます！

  No.2の回答に寄せられた補足コメントです。 補足日時：2019/04/20 11:42

No.2 ベストアンサー 回答者： fujillin 回答日時： 2019/04/19 17:43

No1です

＞～～が不規則にはいります。
規則性が無いとルール化できないので、CSSでの設定は難しそうに思います。

javascriptを利用しても良ければ、同じクラスの要素を数えることが可能なので、「10個おきに色クラスを設定する」とか「10個おきに太字、7個おきにサイズアップ」などといったことも可能になります。

No.1 回答者： fujillin 回答日時： 2019/04/19 16:26

こんにちは

nth-of-type疑似要素は基本的に兄弟要素を対象に働くものなので、「同一クラスの要素だけを対象とする」といったような意味合いは無いようです。

＞10行目ごとに（最初は19行目）に色をつけたいのですが・・・
質問文に提示の無い部分がどうなっているかが不明ですが、単純に「tr要素の19番目から10個おきに色をつける」と考えれば
　#list-table tbody tr:nth-of-type(10n+19)
とすることで、ご希望のようになると思いますが。

この回答へのお礼

ありがとうございます！

お礼日時：2019/04/20 13:09