Tag: :last-child

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 :nth-child と :nth-of-type を完璧に使い分けれるのは、なかなか難しいですが、どんどん理解していくことで、CSSのプロに一歩近づけると思います。 今回、:nth-child を使って、何個か例をあげて説明して行こうと思います。 ５個目だけのエレメントだけをセレクトする場合 かっこ内に特定の数字を入れることで、上の例で言うと５個目だのliを指定して、スタイルを当てれます。 ５個目以降だけのエレメントだけをセレクトする場合 これでもし li が１０個以上あったら、それらもすべて指定することになります。n は、0 から始まることを覚えといてください。 最初の５個だけのエレメントだけをセレクトする場合 n が 0 から始まって -1, -2, -3 となっていきますので、 5 番目より低いエレメントが選択できます。 １個目から始まって、４個ずつ飛ばして選択する場合 奇数を選択する場合 偶数選択する場合 最後のエレメントを選択する場合 １０個のエレメントがあれば１０個目を、１００個あれば１００個目を選択します。 最後から２個目のエレメントを選択する場合 nth に last を入れることで、最後から何個目かを選択することができます。もちろん 2n などを使うことで、後ろからの偶数でもOKです。 対応しているブラウザー 面白いことに :first-child は、インターネットエクスプロラー7(IE7) より対応していましたが、 それ以外のセレクターは IE9 になってからしか対応してません。 それ以外のブラウザーに関しては、特に心配することなく使えると思います。IEの対応が心配な方は、Selectivizrなどを使って補助もできます。