Categories
HTML+CSS ホームページ制作・作成

CSS で 偶数・奇数・n番目の指定

調べるとたくさんヒットするのですが、使うときに毎回 Google を検索しているので、よく使うものを載せておきたいと。

<ul>
<li>1番目</li>
<li>2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
<li>6番目</li>
<li>7番目</li>
</ul>

最初を指定

li:first-child{ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

最後を指定

li:last-child{ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

偶数を指定

li:nth-child(even){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

奇数を指定

li:nth-child(odd){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

上からn番目を指定

li:nth-child(3){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

下からn番目を指定

li:nth-last-child(3){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

上から3の倍数番目を指定

li:nth-child(3n){ background:#fcc; }
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目
  • 7番目

[mokurenCB]