nth-child の n
◆ n は0以上の整数すべて
◆ :nth-child を複数つけるとANDで絞り込める
◆ :nth-child を複数つけるとANDで絞り込める
どこかのサイトで nth-child の説明で 「n」 は1からそこに実際に存在する要素の数までと書いてました
要素が5つのところなら n は1, 2, 3, 4, 5ということです
あれ?そうだっけ
それなら n-1 で最後以外ができるし 他にも 2n+1 で1つめが選択されないようなー
と思ったので調べてみました
結果 n は0以上の整数です
n と書くとすべての要素になります
n+3 で3つめ以降になります
最後以外をしたいなら 4つ要素があるなら
になります
また
ですが
:nth-childを使う方法では 4番目が最後ということを知らないといけません
:nth-last-child というセレクタもあるので
倍数を指定したい時
では偶数かつ3の倍数のもの(6の倍数)にスタイルをあてたいときはどうするのか
複数 :nth-child をつけると すべて満たされたものだけが選ばれます
指定するものを増やすことでどんどん絞り込んでいくのはスタイルシートの基本ですが ここでも使えます
この組み合わせを使うことで
:nth-last-childも使って
実際の結果は↓のページで
http://var.blog.jp/s/nth-child-sample.html
要素が5つのところなら n は1, 2, 3, 4, 5ということです
あれ?そうだっけ
それなら n-1 で最後以外ができるし 他にも 2n+1 で1つめが選択されないようなー
と思ったので調べてみました
結果 n は0以上の整数です
n と書くとすべての要素になります
:nth-child(n)
n+3 で3つめ以降になります
:nth-child(n+3)
最後以外をしたいなら 4つ要素があるなら
:nth-child(-n+3)
になります
また
:not(:nth-child(4))
ともかけますですが
:nth-child(3-n)
とは書けないです (なんで?!:nth-childを使う方法では 4番目が最後ということを知らないといけません
:nth-last-child というセレクタもあるので
:nth-last-child(n+2)
にすれば 最後の要素が何番目かを知らなくても簡単にできます倍数を指定したい時
:nth-child(n*2)
とはできませんが:nth-child(2n)
で偶数を表せますでは偶数かつ3の倍数のもの(6の倍数)にスタイルをあてたいときはどうするのか
:nth-child(2n):nth-child(3n)
これでいけるんです複数 :nth-child をつけると すべて満たされたものだけが選ばれます
指定するものを増やすことでどんどん絞り込んでいくのはスタイルシートの基本ですが ここでも使えます
div.a.b が divの中で aクラスがあるもの さらに bクラスもあるものというように
div:nth-child(2n):nth-child(3n) はdivの中で 2の倍数で さらに 3の倍数のもの となるわけです
div:nth-child(2n):nth-child(3n) はdivの中で 2の倍数で さらに 3の倍数のもの となるわけです
この組み合わせを使うことで
:nth-child(n+4):nth-child(-n+7)
こうかけば 4~7番目 と指定できます:nth-last-childも使って
:nth-child(n+3):nth-last-child(n+2)
3つめから最後から2つめまで と指定もできます実際の結果は↓のページで
http://var.blog.jp/s/nth-child-sample.html