2013.02.23
jQuery/css .class:nth-child(数n)ってしたら兄弟はどーなの？
ちょっとわけわかめになったので覚え書きです。
- 共通のクラスを振ったdivが６つ。それぞれ画像が配置されている。今後同様のdivは増える予定。
- 偶数番目のdivにはもう一つ別のクラスが指定されている。
- ６個置きのdivにclassを追加して、cssを指定したい。
ということで、偶数番目に振られたclass（.icon）に対して、普通にnth-child(6n)の疑似クラスを当ててみました。
|
1 2 3 4 5 6 7 8 |
<div id="kome"> <div class="indiv"><img src="kame.png"></div> <div class="indiv icon"><a href="kame.zip"><img src="ico.jpg"></a></div> <div class="indiv"><img src="suzume.png"></div> <div class="indiv icon"><a href="suzume.zip"><img src="ico.jpg"></a></div> <div class="indiv"><img src="nattou.png"></div> <div class="indiv icon"><a href="nattou.zip"><img src="ico.jpg"></a></div> </div> |
|
1 2 3 |
$(function() { $('#kome').find('.icon:nth-child(6n)').addClass('last_icon'); }); |
6番目に.last_iconが追加されました。
CSS3の nth-child() 疑似クラスでは
親要素内の隣接している子要素を頭から数えて、n番目の要素を選択（スタイルを指定）できる。
間に別の要素が入っても、それもカウントしてn番目。
.icon:nth-child(6n)という記述をすると間の.indivも数えて６の倍数番目。
3nにしたら間の兄弟はどうなるの？
ところが.icon:nth-child(3n)としてもちゃんと６番目の.iconだけに適用されます。
んー？３番目の子要素（.iconの兄弟要素）のdivにも適用されちゃわないの？
されないってことは、div兄弟数えないで、.iconだけ数えてるの？
それだと「間に別の要素が入っても、それもカウントしてn番目。」ということにならないんだけど…
いやいやいや兄弟は数えてるんだ！
クラス.iconにマッチした子要素だけを選択できるんですね！！
３番目には、.iconがないので除外。
６番目には、.iconがあるので適用！
例はjQueryですが、一応jQueryなしcssのみのテストサンプルはこちら。
上の例と違ってごめん。文字のみ。下はキャプチャ画像です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style type="text/css"> #kome {width:300px; margin:100px auto; border:2px solid #CC3333;} .indiv {color: #CC3333;padding:5px;} .icon:nth-child(3n) {background:#ffd700; font-weight:bold;} </style> <div id="kome"> <div class="indiv">かめ</div> <div class="indiv icon">アイコン</div> <div class="indiv">すずめ</div> <div class="indiv icon">アイコン</div> <div class="indiv">なっとう</div> <div class="indiv icon">アボカドとあうよ！</div> </div> |
スポンサーリンク
コメントをどうぞ