:nth-child と :nth-of-type から DOM について思いを馳せた

最近まで :nth-child と :nth-of-type の違いについて知らなかった．というか，:nth-of-type はどこかで見たことある〜程度で使ったことがなかった．知らなくても CSS なんとなく大丈夫でしょ！みたいな気分で生きてきた．

だけど

この間，動的に追加されたスタイルの :nth-child が自分の想像した感じで要素にあたってなくて，なぜだろうってなったので調査する必要が出てきたところから，昔読んだ DOM についての記事につながりだした．

表があったとして:

<table class="container">
  <tr id="some-tr">
    <th>A</th>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <th>
      <table>
        <tr>
          <td>E</td>
        </tr>
      </table>
    </th>
  </tr>
</table>

f:id:mangano-ito:20200306115504p:plain

<td> の 1, 2, 3 番目で色をそれぞれ変えたいみたいな思いがあった:

f:id:mangano-ito:20200306115536p:plain

`:nth-child` 編

なので，td:nth-child をざっくり使うと，こうなる:

f:id:mangano-ito:20200306115646p:plain

$colors: ('red', 'green', 'blue', );

.container #some-tr {
  @each $color in $colors {
    $index: index($colors, $color);

    & td:nth-child(#{$index}) {
      &::before { content: 'td:nth-child(#{$index})'; }
      &         { border: medium solid #{$color}; }
    }
  }
}

実際のところ，B, C, E にスタイルがあたるようになっている．

理由

これは 2 つ理由があって:

td:nth-child はまず :nth-child な要素があって，それを td で絞りこまれている
E の <td> は直近の <table> について見れば，td:nth-child(1) であるということ

なので，ぱっと見 1 番目の <td> っぽい A にはスタイルはあたらず，ぱっと見 5 番目かつ <th> の E に 1 番目のスタイルがあたるようになっている．

`:nth-of-type` 編

なので，意図した動作のためには，:nth-of-type と > を使ってこう書く必要がある:

$colors: ('red', 'green', 'blue', );

.container #some-tr {
  @each $color in $colors {
    $index: index($colors, $color);

    & > td:nth-of-type(#{$index}) {
      &::before { content: 'td:nth-of-type(#{$index})'; }
      &         { border: medium solid #{$color}; }
    }
  }
}