[CSS]tableタグの中で連続するthタグが複数ある場合にスタイルを変更する

ちょっとしたトリッキーなCSS適用をしてみた。
tableタグのヘッダーthが5つ以上ある時にデザインを変えたい要件が発生したのでCSSを作った。

styled-componentsで書いてるけど、SCSSと同じ書き方をしています。

特定の要素以下に連続するタグが5つ以上あるときに、スタイルを適用

tbody直下にあるtrで、その中に5つ以上のthがある場合に適用するスタイルです。
trタグに:has擬似クラスをつけての中に5つ以上の要素があるときにthタグにスタイルを適用します。

const StyledTbody = styled.tbody`
  tr {
    &:has(> :nth-child(5)) th {
      color: red;
    }
  }
`;

最初のtrの中にある連続するタグを対象にする

trタグに:first-child擬似クラスをつけると、trの最初の要素だけに対象が絞られます。

const StyledTbody = styled.tbody`
  tr:first-child {
    &:has(> :nth-child(5)) th {
      color: red;
    }
  }
`;

Summary

hasクラス、便利ですよね。ただパッと見たときに分かりにくいのでコメントを入れてあげたほうが良いと思います。それに、このTableタグだけだよ〜、な要件なら、CSSでもよさそう。
もし他の条件があるようならJavaScriptで書いたほうが分かりやすそうです。