【CSS】○番目の要素を選択する疑似クラス色々

CSSは擬似クラスが追加されてから色々な条件でのCSSの設定ができるようになりました。
今回説明する擬似クラスもいろいろな用途で必ず必要となる使用頻度の高いものになっています。

１番最初と１番最後を指定したい！

「:first-child」「:last-child」

リストなどを作成した場合、先頭にあるもの、最後にあるもの、もしくは最初と最後に何かしら変更したい事があると思います。
その場合に必要になる擬似クラスが「:first-child」「:last-child」になります。

<ul class="list">
  <li>りすと１</li>
  <li>リスト２</li>
  <li>LIST３</li>
  <li>list４</li>
  <li>Risuto5</li>
</ul>

.list li:first-child {
  color:#f00;
}
.list li:last-child {
  color:#00f;
}

上記のようなHTMLとCSSを用意しました。
これはリスト要素の最初と最後のliの文字の色を変更させています。
基本的にはこのような使い方をする擬似クラスになります。

「:first-of-type」「:last-of-type」

<div class="text">
  <p>りすと１</p>
  <p>リスト２</p>
  <p>LIST３</p>
  <p>list４</p>
  <p>Risuto5</p>
</div>

しかし、先程の「:first-child」「:last-child」はliのようなリスト属性にしか使用できません。ですが、上記のようなHTMLでも使える擬似クラスがあります。それが「:first-of-type」「:last-of-type」の擬似クラスになります。

.text p:first-of-type {
  color:#f00;
}
.text p:last-of-type {
  color:#00f;
}

この２つのタイプはリスト以外でも特定の要素の１番最初の物と一番最後の物を指定します。「:first-child」「:last-child」よりもより広い範囲で設置できる擬似クラスです。
そのため、指定する要素をdiv等で囲んでから使用しないと、予期せぬ所が指定されたりすることもあります。

好きな順番を指定したい！

最初と最後だけではちょっと物足りません。やはり、好きな番号を指定したいですよね。１位だけじゃなくて２位と３位も色付けしたいですものね。
そういう場合の擬似クラスはこちらになります。

「:nth-child()」「:nth-of-type()」

.list li:nth-child(3) {
  color:#f00;
}
.text p:nth-of-type(1) {
  color:#f00;
}

「:nth-child()」「:nth-of-type()」という擬似クラスを使用します。（）の中に適用したい数字を入れます。childとof-typeの使い分けは先程と同じです。
これによって好きな順番の要素を変更できるようになります。

.list li:nth-child(odd) {
  color:#f00;
}
.text p:nth-of-type(even) {
  color:#f00;
}

ちなみに偶数と奇数で色を変更させることも可能です。上記のように（）の中にoddとevenを入れる事で偶数、奇数で変更させることが可能です。
（oddが奇数、evenが偶数です）
交互にCSSの内容を変化させたい場合に有効な方法です。
テーブルを作成する時に背景の色を交互に色を変えたいときなど、いろいろな場所で使えます。

.list li:nth-child(3n) {
  color:#f00;
}
.text p:nth-of-type(3n-1) {
  color:#00f;
}

（3n）等、数字にnで倍数になります。これで、３の倍数の要素にクラスが適用されるようになります。
そして、その後ろに-１や+1等をやると、その倍数の初期位置がずれます。
つまり、上記のように（3n-1）とやると、最初の要素は３番目からスタートですが、初期位置が-1されているので２番めの要素から３の倍数で要素が変更されるようになります。使い方によってはかなり強力なものになりますので、頭の片隅にでも入れておいてもらえたらと思います。

「:nth-last-child()」「:nth-last-of-type()」

そして最後に説明するのがこれです。今までの流れでうすうす感づいていると思いますが、この疑似要素は最後の要素から数えます。ブービー賞に色を付けたい時に便利ですね。

.list li:nth-last-child(3n) {
  color:#f00;
}
.text p:nth-last-of-type(2) {
  color:#00f;
}

使い方は、最後から数えると言う点以外は今までと全く同じです。3n等の倍数を設定した場合、最後から数えた順番の倍数で要素が適用されます。

この部分はぜひ紹介したいなと思って書き始めたのですが、思ったより説明することが多いので駆け足での紹介になってしまいました。
何はともあれ、これらの擬似クラスを有効に使えば色々な場面で実に役に立ってくれますよ。

ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。