こんにちは、takahashiです。
CSSを書いていると「同じクラスなのに、一部分だけ変えたいな」と思う場面が..たまにはあるでしょう。
たとえば、一覧の2番目だけ色を変えたり、偶数行だけ背景を付けたり。
そんな時によく使うのが、「nth-child」です。
見た目は少しややこしいんですが、仕組み自体は意外とシンプルです。
今日は、そんな「CSSで何番目を指定する方法」について、お話します。
nth-childとは？
CSSでは、要素が「何番目にあるか」を指定できます。
その時に使うのが、:nth-child() という書き方です。
たとえば、こんな感じです。
li:nth-child(2) { color: red; } これは、「2番目のliを赤くする」という意味になります。
表や一覧のデザインなどで使われます。
偶数だけ色を変える
tr:nth-child(even) { background: #f5f5f5; } これで、2行目、4行目、6行目…という感じで背景色が付きます。
表が見やすくなるので、定番の使い方だったりします。
奇数だけ指定する
li:nth-child(odd) こちらは、1・3・5番目…を指定できます。
「odd」が奇数、「even」が偶数。
ここはそのまま英語です。
nが出てくると少しだけ混乱する
nth-childは、「繰り返し」も指定できます。
li:nth-child(3n) これは、3・6・9番目…という意味です。
nは「繰り返し」のイメージ。
最初は少し戸惑いますが、慣れるとパターン指定みたいな感覚になります。
たとえば、
li:nth-child(3n+1) なら、1・4・7・10…になります。
nth-of-typeとの違い
似たものに、:nth-of-type() があります。
これは「同じ種類のタグの中で何番目か」を見るものです。
最初は混乱しやすいのですが、
・nth-child → 全体の順番
・nth-of-type → 同じタグ内の順番
くらいで覚えておくと、そこまで困らないと思います。
実務ではたまに便利
実際の制作では、クラスを増やさなくて済む場面があります。
「3つごとに余白を消す」
「偶数だけレイアウトを変える」
「最初だけデザインを変える」
そんな調整を、CSSだけで書けたりします。
扱いに少しクセはありますが、たまーに役に立つ存在です。
是非みなさんもそんな場面がもしきたら使ってみてください。それでは、また。
