ページ内目次

要素の最初、最後、偶数、奇数、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) など…

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny

↑上へまいりま〜す