nth-of-type を使いこなそう。

HTML表の表現で以下のように、3*n 段の内２段目だけ上下の罫線を変えたい。

真っ先に浮かんだ nth-child では、苦しい。 

悩んでいろいろ調べたら、nth-of-type を使えばいい。

table.score{
   box-sizing: border-box;
   border-collapse: collapse;
   border-spacing: 0;
   white-space: nowrap;
   display: block;
}
.score th{ font-weight: normal; }
.score th, .score td{ border: 1px solid #000000; height: 20px; }
.score th:nth-child(1){ width: 200px; }
.score td:nth-child(1){ width: 200px; }
.score th:nth-child(n+2){ width: 30px; }

.score tbody tr:nth-of-type(3n+1) td{ border-bottom: none; }
.score tbody tr:nth-of-type(3n+2) td{ order-top: 1px dashed #404040; border-bottom: 1px dashed #404040; }
.score tbody tr:nth-of-type(3n+3) td{ border-top: none; }


そもそも、２段目だけなら、3n-1　を使うのだけど、他は罫線を１本線で書きたいからだ。

２段目だけ背景色を変えるなら、、

tr:nth-of-type(3n-1) td{ background-color: #ffffcc; }

ということである。