"

スタイルシートの便利なセレクタ :nthシリーズ!

MISSION:CSSの便利なセレクタを3紹介すること

いつからかは調べてないのでわかりませんが、とても便利なセレクタがありましたのでご紹介します。
ちなみにセレクタというのは、

section#sukinanamae h1 {
   font-size:30px;
   border-bottom:1px solid #cccccc;
   padding:16px 20px;
}

「section#sukinanamae h1」の部分です。今回は以下の3つだけ紹介します。

  1. :first-child
  2. :nth-child(n)
  3. :nth-of-type(n)
例文
<div>
  <p>オススメの画像</p>
  <img src="画像1">
  <p>オススメの画像2</p>
  <img src="画像2">
  <img src="画像3">
  <img src="画像4">
  <img src="画像5">
</div>

:first-child

div img:first-child {border-color:blue;}

直訳:divの中のimgの1つめ、ボーダーを青にしてください。

:nth-child(n)

div img:nth-child(2n+1){ border-color:red;}

直訳:divの中のimgの奇数番目、ボーダーを赤にしてください。
nth-child(1)とfirst-childは同じものを指しますね。

:nth-of-type(n)

div img:nth-of-type(2n+1){ border-color:black;}

直訳:divの中のimgの奇数番目、ボーダーを黒にしてください。
ちなみに、2n+1が奇数で2nが偶数というのは中学か高校で習っていると思いますので…

さて、あれ?おかしいな?と思っていただけたでしょうか!というわけで次で説明しますね。

nth-childとnth-of-typeの違い

この二つの違いは、

何番目なのかを数えるときに自分と違うものを含んで数えるかどうか

なんです。つまりは、さっきの例文でいきますと、

どちらもimgの奇数番目を対象にしていますので、画像1は確実に色が変わります。

nth-childはタイプの指定をしていないものになるので、
子要素はすべてカウントします。この場合はpをカウントして画像2と画像4の色が変わるはずです。

nth-of-typeはその名の通りタイプ(=img)を指定しているので、画像3と画像5の色が変わるはず。という感じです。

最後に

以前のCSSでは、表の色分けなどで最初の行のmargin-topなど用のクラス、奇数行用のクラス、偶数用のクラス、最終行のmargin-bottom用のクラスというように無駄な記述をして、更新の際もコピペして変なマージンが入るなど、意図しない挙動をさせて余計な手間がかかってましたが、今回紹介したようなセレクタを利用すれば、作成も更新も両方が簡単かつわかりやすいものにできるようになりました。

first-childに対してlast-childなどもありますし。少し調べるのもいいと思います。

また、最後の2つは紛らわしいのでそういう2種類の指定があるということだけ覚えておいて、使う時に調べるのもいいかと思います!