IE8でnth-child を使う方法

nth-childは、nth-child(n)の形で指定番目の要素にcssを適応させることができるもの。

■3番目のliだけ背景を黄色にする。
ul li:nth-child(3){
background: yellow;
}

■3の倍数個目のliだけ背景を黄色にする。(3個づつの行を作ったりするときに便利)
ul li:nth-child(3n){
background: yellow;
}

■5個目以降
li:nth-child(n+6) {

color:green;
}

■5個目まで

li:nth-child(-n+5) {
color:green;
}

問題は、8以下で使えない。

■3番目のliだけ背景を黄色にする。

ul > *:first-child + * + * {
background: yellow;
}

これで、「+ *」をついかしていくことで、N個目だけにcssを適応させるということはできる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です