【css/sass】nth-childで、テーブルの指定したセルに背景色を自由自在につける方法

バートリーのさいとうです。

今回は

【css/sass】nth-childで、テーブルの指定したセルに背景色を自由自在につける方法

というテーマで、僕が実務から得られた学びを共有していきたいと思います。

早速ですが、テーブルを作成するにはtableタグを利用し、以下tr, tdなどを利用しセルを作成することが可能です。

ここで

「背景色を交互にしたい。」

または、

「何番目から何番目はこの色にしたい。」

と考えたときに、今回の紹介する方法は有効です。
合わせて、普段はsassを使っているので、sassでの書き方も紹介します。

この記事を読めば

nth-childを利用した、テーブルの背景色の変え方がわかる
sassでnth-childを利用したセルを自由に操る方法がわかる
テーブルのセルを個別で自由自在に操ることができるようになる

と思いますので、tableの背景色を自由自在に操りたい！という方は、現役エンジニアの僕と一緒に、基礎と応用を学んでいきましょう。

早速結論

早速結論から。このようにすれば、自由に背景色を決めることができます。

See the Pen by サイトウユウキ (@yuki-lm) on CodePen.

ポイントは、以下の2つです。

テーブルの背景色を自由自在に操るためのPoints

疑似クラスのnth-childの使い方がわかる
nth-childの()の”n + 〇〇”オプションを理解する

では、ここから具体的にコードを見ていきましょう。

疑似クラスのnth-child

まずは基礎として、疑似クラスの考え方とnth-childの意味を理解していきます。

知ってるよ！という方は飛ばしても大丈夫です。

疑似クラス

MDN Web Docsによると疑似クラス（Pseudo-classes）は、

セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。

とされています。

つまり、要素を指定して特別にいろんな状態付与できるやつですよ、ということですね。

nth-child以外の疑似クラスには、hoverやfocusなどが存在します。その他にもたくさん定義されているので、気になる方は疑似クラス一覧からご覧ください。

nth-child

その中でも、nth-childは

兄弟要素のグループの中での位置に基づいて選択します。

とされます。兄弟要素とは、簡単にいうとhtmlファイルで同じ段に存在する要素です。
今回の例でいくと、tdは12人の兄弟がいることになります。
(その親のtrは子宝に恵まれましたね。）

このように、nth-childは兄弟の中で、兄なのか妹なのか、のように「何番目？」を指定することができるプロパティということになります。

n + 〇〇を利用する

では、ここまでで基礎が抑えられたかと思いますので、早速今回のコードを見ていきましょう。

nth-child(n + 〇〇)で、「〇〇以降の要素を…」

.cell {
  border: 1px solid red;
  background-color: #ebebeb
}

.cell:nth-child(n+2) {
  background-color: blue
}
.cell:nth-child(n+4) {
  background-color: orange
}
.cell:nth-child(n+8) {
  background-color: green
}
.cell:nth-child(n+12) {
  background-color: yellow
}

今回、table内でtdにcellというクラスを付与し、疑似クラスを与えました。

このcellクラスに、nth-child(n + 〇〇)と疑似クラスを付与することで、「〇〇以降の要素」を指定することができます。

例えば、n + 2であれば、2番目以降の要素が指定がされ、background-color: blueが付与されます。

今回の例では、この仕組みを利用し、左からどんどん更新させていくような書き方をしています。

これで、セルごとに色を変えることができるようになりました。

sassの書き方

では、sassではどのように記述されるのでしょうか？

.sample_table {
  table-layout: fixed;
}

.cell {
  border: 1px solid red;
  background-color: #ebebeb;

  &:nth-child(n+2) {
    background-color: blue;
  }

  &:nth-child(n+4) {
    background-color: orange;
  }

  &:nth-child(n+8) {
    background-color: green;
  }

  &:nth-child(n+12) {
    background-color: yellow;
  }
}

ポイントは、付与には&:セレクタを使うということですね。

疑似クラス全般は、これで指定することが可能です。

nth-childの引数

本題は異常ですが、補足としてnth-child()の引数は色々あるよという話をします。

以下を理解しておけば、大体のことはできる気がします。

引数	意味
odd	奇数（1, 3, 5….）番目の要素を指定
even	偶数（2, 4, 6…）番目の要素を指定
数値	指定された数値番目の要素を指定
数値n	指定された数値の段を指定（例：5nなら、5 x 1= 5, 5 x 2 = 10…のように）

oddとかevenはよく使いそうですね。

さらに深く知りたい方は、こちらをご覧ください。