2013.02.23

jQuery/css .class:nth-child(数n)ってしたら兄弟はどーなの?

ちょっとわけわかめになったので覚え書きです。

  • 共通のクラスを振ったdivが6つ。それぞれ画像が配置されている。今後同様のdivは増える予定。
  • 偶数番目のdivにはもう一つ別のクラスが指定されている。
  • 6個置きのdivにclassを追加して、cssを指定したい。

ということで、偶数番目に振られたclass(.icon)に対して、普通にnth-child(6n)の疑似クラスを当ててみました。

6番目に.last_iconが追加されました。

CSS3の nth-child() 疑似クラスでは
親要素内の隣接している子要素を頭から数えて、n番目の要素を選択(スタイルを指定)できる。
間に別の要素が入っても、それもカウントしてn番目。
.icon:nth-child(6n)という記述をすると間の.indivも数えて6の倍数番目。

3nにしたら間の兄弟はどうなるの?

ところが.icon:nth-child(3n)としてもちゃんと6番目の.iconだけに適用されます。
んー?3番目の子要素(.iconの兄弟要素)のdivにも適用されちゃわないの?
されないってことは、div兄弟数えないで、.iconだけ数えてるの?
それだと「間に別の要素が入っても、それもカウントしてn番目。」ということにならないんだけど…
いやいやいや兄弟は数えてるんだ!

クラス.iconにマッチした子要素だけを選択できるんですね!!
3番目には、.iconがないので除外。
6番目には、.iconがあるので適用!

例はjQueryですが、一応jQueryなしcssのみのテストサンプルはこちら。
上の例と違ってごめん。文字のみ。下はキャプチャ画像です。
nth_c

コメントをどうぞ



PageTop