Web-Gimmick Web制作と知識のメモ帳

CSS3で○番目の要素や奇数・偶数、倍数で要素を指定する方法。

利用頻繁は多めです。
○番目の要素や奇数・偶数の指定。
CSSの疑似クラスを使って子要素にスタイルを適用する方法です。

CSS3で○番目の要素や奇数・偶数、倍数で要素を指定する方法。

jQueryと違ってCSS3に対応しているブラウザでしか使用できませんが、
対応ブラウザの範囲内でならこちらを使った方が軽量で簡単、jQueryを使う必要もなのでオススメです。

奇数・偶数の要素に適用する。

奇数の要素に指定。

li:nth-child(odd){
 スタイル
}

偶数の要素に指定。

li:nth-child(even){
 スタイル
}

指定した倍数の要素に適用する。

○倍目の要素に指定。

li:nth-child(3n) {
 スタイル
}

上記では3の倍数(3,6,9,12)の要素に指定。
(3n)の数字部分で倍数を指定。

○番目の要素に適用。

最初の要素に指定。

li:first-child{
 スタイル
}

○番目の要素に指定。

li:nth-child(3) {
 スタイル
}

上記では3つ目の要素に指定。
(3)の数字で○番目を指定。

最後の要素に指定。

li:last-child{
 スタイル
}

最初or最後から○番目までの要素に適用する。

最初から○番目までの要素に指定。

li:nth-child(-n+3) {
 スタイル
}

上記では最初から3番目の要素にまで指定。
(-n+3)の数字で○番目を指定。

最後から○番目までの要素に指定。

li:nth-last-child(-n+3) {
 スタイル
}

上記では最後から3番目の要素にまで指定。
(-n+3)の数字で○番目を指定。

あとがき

疑似要素はCSS3の要素の中でもすごく便利な要素ですが、
IE8以下には認識してもらえないので、使用する際には対応ブラウザに注意です。

関連する記事はこちら

コメントをどうぞ

サイト内検索

Copyright ShitteLog All rights reserved.