リスト項目やメニュー項目で、「奇数項目に背景色を」とか「最初だけ左枠線をつけたい」とか、結構あります。
簡単にスタイルシートで指定できますが、簡単に忘れます(;´Д`)
なので、備忘録としてメモメモ
最初の要素 – first-child
li:first-child {
background: #000000;
}
最後の要素 – last-child
li:last-child {
background: #ff0000;
}
奇数番目 – nth-child(odd)
li:nth-child(odd) {
background: #000000;
}
偶数番目 – nth-child(even)
li:nth-child(even) {
background: #ff0000;
}
n番目 – nth-child(n)
li:nth-child(n) {
background: #000000;
}
xの倍数番目 – nth-child(Xn)
li:nth-child(xn) {
background: #000000;
}
最後からn番目 – nth-last-child(n)
li:nth-last-child(n) {
background: #ff0000;
}
◯◯◯以外の要素だけ
li:not(:◯◯◯) {
background: #000000;
}
◯◯◯には、first-child、nth-child(n) など…