tableで最初の列の背景色を交互に変えたい

Question

前提・実現したいこと

tableでBootstrapのtable-stripedを指定して行が交互に色が変わるようにしています。
最初の列を色を少し濃くしたいのですがどりようにすればよろしいのでしょうか。
下記のテーブルでは極端ですが背景を赤→青→赤→青にしたいと思っています。

列1	列2	列3
背景を赤
背景を青

試したこと

スタイルシートでfirst-childとnth-childを使えばできると思っているのですがうまくいきません。

Answer 1

こんばんは。

first-childとnth-childを使えばできると思っている

その通りだと思います。
HTMLをご提示いただいていないので、Bootstrapのサンプルコードを基に書いてみました。

サンプル

tbody tr:nth-child(odd) th:first-child{
  background: red;
}
tbody tr:nth-child(even) th:first-child{
  background: blue;
}

Comments

[teigigoteatime]

ソースを提示せず投稿したにも関わらず、早々のご返答ありがとうございます。
evenとevenはそのまま使うのですね。ここも分からずなんとなく使っていました。
結果としましては下記のようにしたところ実現できました。

tbody tr:nth-child(odd) td:first-child{
background: red;
}

tbody tr:nth-child(even) td:first-child{
background: blue;
}

Answer 2

Bootstrap（v4.5）の.table-stripedは以下のように指定されています。

.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(0,0,0,.05);
}

これはtbody内の奇数行に背景色を付ける仕様ですので、逆にしたい場合は

.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: transparent;
}

.table-striped tbody tr:nth-of-type(2n) {
    background-color: rgba(0,0,0,.05);
}

のように上書き（Bootstrapより後から読み込むカスタムcssなどに書き込み）すれば偶数行だけに背景色が付きます。
もし赤→青→赤→青としたければbackground-colorのところを奇数（2n+1）を赤、偶数（2n）を青に指定するだけです。
あと、theadにも背景色を付けたいのであれば、上記に倣って

.table-striped thead tr {
    background-color: #ddd;
}

とすることで解決します。

Comments

[teigigoteatime]

早々のご返答ありがとうございます。
目標とは異なりましたが table-striped を書き換える発想はありませんでした。
とても参考になります。

[cerfweb]

すみません。「最初の列を」というところを見落として勘違いしていました。