「nth-child」擬似クラスセレクタの注意点は『1』から始まる番号であること。

CSS3から定義される予定の「nth-child」擬似クラスセレクタ。

全体ではなく「親要素」毎に適用されるので、繰り返されることが前提の要素に使用するとメンテナンスが非常に楽になります。

たとえば、ul要素に対しての"li"要素、tr要素に対しての"td"要素など。

jQueryを使用して、CSS3未対応のブラウザにも適用させる場合、下記のようなコードになります。

$("ul li:nth-child(3)").css("font-weight", "bold");

これで、html上に存在するul要素ごとに「上から3番目」のli要素の文字が"太字"になります。

ここでの注意点は「:eq」と違い、『1』から数えられること。

気をつけて覚えておきましょう。

子要素の数が変動するようなコンテンツ(CGM系サイトなど)を作る際に、こうしたコーディングを行なっておくと運営フェーズでのメンテナンスが非常に楽ですね。

関連するWeb制作・開発Tips

関連リンク