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を適応させるということはできる。