nth-of-typeはCSSでとても便利な擬似クラスです。

何が便利なのかというと、例えばエクセルのセルのように 1行ごとに背景の色を変えたいっていうときによく使われています。

他にも最初の要素に適用するfirst-childや最後の要素に適用するlast-childなんかもありますが、 nth-of-typeを使えばそれも補完できるので一番便利だなって思うこれを紹介していきます。

疑似クラスの使い方

疑似要素と疑似クラスとありますが、疑似要素とは「【CSS講座第3回】疑似要素::before ::afterを使って＋アイコンを作る」で紹介した「::before」とかになります。

一方擬似クラスはよくマウスカーソルを載せたときに使う「:hover」とか、 inputタグにカーソルを合わせてクリックしたときに動かす「:focus」とかが擬似クラスになります。

擬似要素はコロンが２つ、疑似クラスはコロンが１つと覚えておくのもいいでしょう。

nth-of-typeの説明に入る前に擬似クラスの使い方について軽く説明します。

「【CSS講座第1回】transitionの基本的な使い方」でもやりましたが マウスカーソルを乗せると画像の透明度をあげるという手法は「:hover」という擬似クラスを使っていました。

img {
  opacity:1;
  transition:opacity 0.3s ease;
}
img:hover {
  opacity:0.7;
}

タグやクラス、IDに対して「:」で区切って準備されている擬似クラスを使うことで 様々な演出やデザインが可能になります。

ちょっと変わった動きをしたいときとかは昔はJavaScriptで制御していましたが、 最近ではtranstionと疑似クラスや疑似要素を使えばCSSのみで 様々なアニメーションができるようになっています。

nth-of-typeで指定の位置のスタイルを変更

それでは本題に入りましょう。

「nth-of-type」とはMDN Web Docsでは以下のように説明されています。

:nth-of-type() は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

初心者が見るとなんかよくわからないと思うので、具体的に説明すると

<dl>
  <dt>タイトル１</dt>
  <dd>内容１</dd>
  <dt>タイトル２</dt>
  <dd>内容２</dd>
  <dt>タイトル３</dt>
  <dd>内容３</dd>
  <dt>タイトル４</dt>
  <dd>内容４</dd>
</dl>

上記のようなHTMLがある場合、特定のタグのスタイルを変えたい場合は 該当のタグにクラスを与えてやるのが基本だと思われます。

しかしnth-of-typeを使えばクラスを与えなくても指定の位置のタグのスタイルを変更する個が可能になります。

もしDLタグが複数あってそこのDLだけ変えたい場合は、 そのDLに1つクラスをつけておいたほうがコードが少なくなってすみます。

やろうと思えばhtmlの中にあるbodyの中にあるdl何個目みたいな指定もできますが、 無駄にコードが長くなるので基本は親にクラスをつけておいたほうがいいでしょう。

それではDLの中にある2つ目のDTタグであるテキスト「タイトル２」だけ色を変更したい場合は 以下のようにnth-of-typeを使えば指定できます。

dl dt:nth-of-type(2) {
  color:#f00;
}

上記の意味はDLタグの中にある何個目のDTかという感じになります。

厳密にはちょっと違うのですが、そういう感じで捉えておくといいでしょう。

テクニックとして２つ目のDTとDDをまとめて変更したい場合は、 それぞれにnth-of-typeを使って２つ指定することもいけますが、 もっとスマートに書く場合は以下のようになります。

dl :nth-of-type(2) {
  color:#f00;
}

これでDLタグの中にある２つ目のDTとDDの文字色が変更されます。

まとめて同じスタイルを適用する場合に使えますが、 別々の色にしたい場合とかはやはり個別に書いたほうがいいでしょう。

偶数or奇数の要素にだけスタイルを適用

nth-of-typeは直接値を指定することによって使うことができますが、 もっと便利なやり方として奇数や偶数ごとにスタイルを適用するといった いわゆるエクセルのでよくある交互に背景色を変更するような仕組みを作ることが出来ます。

他にも３つ置きに設定。４つ置きに設定...etcと自分の好きな間隔で指定することが可能です。

今回はよく使われる偶数奇数のやり方を説明します。

odd(奇数)とeven(偶数)を使う

奇数偶数にしたい場合は数値で指定してもいいですが、 元から用意されている「odd(奇数)」と「even(偶数)」で指定することが出来ます。

プログラミングをやったことがある人なら「定数」という概念が使われているのが予想できるかなと思います。

dl :nth-of-type(odd) {
  color:#f00;
}

dl :nth-of-type(even) {
  color:#00f;
}

上記のCSSは奇数のDTとDDに赤文字を指定。

偶数のDTとDDに対して青文字を指定していることになります。

nという指定方法

「n」を使った数値の指定方法を軽く説明します。

先ほどやった奇数偶数を、nを使って表すと以下のようなCSSになります。

dl :nth-of-type(2n+1) {
  color:#f00;
}

dl :nth-of-type(2n) {
  color:#00f;
}

「n」の意味は要素１つにつき＋１ずつされていきます。

数学の表記と同じで上記の偶数指定である「2n」は「2xn」という数式になっています。

タグ１つに付きnが１増えていくというイメージで大丈夫です。

最初は「n=0」となっているため、「2n」は以下のような数値になります。

2x0=0, 2x1=2, 2x2=4...

プログラミング的にみると０個目のタグから偶数で適用されていくことになるのですが、 HTMLには0個目のタグという概念はなく1つ目から始まるので最初の「n=0」のときは何も動作していないことになります。

なので次の「2x1=2」からスタイルが適用されていくというわけですね。

奇数の「2n+1」は先ほどの計算に+1をしていくだけです。

2x0+1=1, 2x1+1=3, 2x2+1=5...

と奇数になるわけですね。

もう一つ「n+2」とすると

0+2=2, 1+2=3, 2+2=4...

と2から開始することになります。

1つ目以外適用させたいときに使えますね。

逆に1つ目だけに適用したい！ってなった場合はnth-of-type(1)でいいですし、 「:first-child」という指定方法もあります。

ちなみに最後の要素だけに指定する場合は「:last-child」になります。

:nth-childはちょっと厄介

nth-of-typeは兄弟要素に適用ですが、nth-childは子要素に適用されます。

しかし子の子、つまり孫が入っていると挙動がちょっと厄介になります。

htmlタグは基本的に入れ子構造になることが多いので、 nth-childはシンプルなhtml構造でないとかなり癖のある動きをします。

理解すれば便利なのですが、なれないうちはnth-of-typeで タグを直接指定したほうが「タグXの中にある2個めのYタグ」みたいな感じで直感的に指定しやすいかなと思います。

基本はnth-of-typeを使って、これでは理想の動きにならないなって感じたら nth-childを駆使して見るのもいいかも知れません。

まずは実際に使ってなれるところから始めましょう。

oddやevenを使って交互に色を変えるやり方を覚えるとデザインの幅がぐっと広がります。

疑似要素を使うとhtml側にも無駄なクラス指定をしなくてもよくなりますし、 専用のクラスを書く必要もなくなりますので色んな面でスッキリします。

ですが、HTML+CSS覚え始めのうちは愚直にクラスを作って置いたほうがいいかも知れません。

それと共同で開発する場合なんかも逆にクラスを指定したほうが コードを見るだけで何処に適用されるのかわかりやすいため、 そういうのはチームで共有されているコード規約をしっかりと確認しましょう。

私はHTMLに関しては完全に独学で覚えてきたのと、今後も共同開発することはほぼ無いので、 基本的に擬似要素や擬似クラスを使いまくってます(笑)