ページ内目次

要素の最初、最後、偶数、奇数、n番目にスタイルを適用させたーい

リスト項目やメニュー項目で、「奇数項目に背景色を」とか「最初だけ左枠線をつけたい」とか、結構あります。

簡単にスタイルシートで指定できますが、簡単に忘れます(;´Д`)

なので、備忘録としてメモメモ

最初の要素 – 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) など…

↑上へまいりま〜す