「CSS3の『nth-child』って何じゃい!?」の巻
CSS3で新たに追加されたプロパティや値などは択山ありますが・・・
アニメーションやらトランスフォームやらの視覚的なモジュールが目立っていますが、
個人的に一番実践的に役立ちそうだなと思ったのが、
nth-child と
nth-of-type のセレクタ。
今回はまず
nth-child。
『nth-child』の使用例
<div>
<p>ときどきWEB</p>
<h1>ときどきWEB</h1>
<p>ときどきWEB</p>
</div>
このサンプルhtmlに以下のCSSを適応させます。
div p {
background : blue;
}
div p:nth-child(3) {
background : red;
}
親要素(div)の中に含まれた
子要素(p)の
背景に青色を指定しました。
その後、
親要素(div)の
子要素(p)の
(3)番目の要素にだけ
背景色に赤を適応させるという指定をしました。
出力結果を見てみましょう・・・。
いまいちピンとこない方のための
無駄に頑張って解説してやんよのコーナー
ここで
要注意なのは
親要素div内の
子要素の最初の
p要素から数えて3番目の要素が対象という事!!
3番目以前に
他の<h1>タグなどが含まれていても同じ
子要素内の対象物としてカウントされるという事です。
実に便利そうな感じがしますね・・・まだ使った事ないけど・・・。