HTML/CSS

【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はよく使いそうですね。

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

まとめ

今回は、【css/sass】nth-childで、テーブルの指定したセルに背景色を自由自在につける方法というテーマで解説しました。

このnth-child、使いこなせるとかなり表現の幅が広がってcssが楽しくなっちゃいますね。

このブログは、月に15本を目標に、実務から学んだプログラミングのあれこれを発信しています。

誰かのためになれば、嬉しいです。

最後まで読んでいただき、ありがとうございました。

それでは。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA