Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2013年6月28日 Web制作

【CSS】奇数・偶数・n番目など、要素を指定する時によく使うセレクタまとめ


nthoeよく使うものだけね。
CSSの擬似クラスを使えば、複雑なCSSを書かなくても「色分けされた表」や「リスト」などが簡単に作れてしまいます。 自分の備忘録も兼ね、その方法をザックリとまとめておきます。

サンプル

まず、シンプルなリストを作ってみましょう。
<ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> <li>項目5</li> </ul>
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5
とりあえず5つの項目が入ったリストを作ってみました。この各項目を、擬似要素を使って色々といじってみましょう。

最初の要素にスタイルを適用

li:first-child{ background: #ff8080; }
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5


最後の要素にスタイルを適用

li:last-child{ background: #ff8080; }
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5


奇数番目の要素にスタイルを適用

li:nth-child(odd){ background: #ff8080; }
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5


偶数番目の要素にスタイルを適用

li:nth-child(even){ background: #ff8080; }
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5


上からn番目の要素にスタイルを適用

li:nth-child(2){ background: #ff8080; }
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5
li:nth-child(n)・・・上からn番目の要素にスタイルを適用

下からn番目の要素にスタイルを適用

li:nth-last-child(2){ background: #ff8080; }
  • 項目1
  • 項目2
  • 項目3
  • 項目4
  • 項目5
li:nth-last-child(n)・・・下からn番目の要素にスタイルを適用


以上。
関連するかもしれない記事