ページの先頭へ
トップに戻る
2017年1月12日 Web制作

【CSS】最初、最後、奇数、偶数、n番目など、リストの装飾でよく使う擬似クラスまとめ

リストでよく使いそうなものだけをピックアップしました。
今回使うリストはこちら。
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText
見やすいように少しだけCSSをいじっていますが、至ってシンプルなリストです。

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

:first-child
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

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

:last-child
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

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

:nth-child(odd)
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

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

:nth-child(even)
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

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

:nth-child(n)
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

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

:nth-last-child(n)
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

○○以外の要素にだけスタイルを適用

:not(条件)
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

実用例

最初(最後)のliのみborderを表示しない

見づらくなるので、このサンプルのみul{border:none}を指定しています。
  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

縞模様のリスト

  • 1.DummyText
  • 2.DummyText
  • 3.DummyText
  • 4.DummyText
  • 5.DummyText

最後に

これだけ覚えてれば、とりあえずリスト周りの装飾はどうにでもなりそうです。
ちなみに、最初のliだけborderを消したいとき、管理人は今まで全てのliにborder-topを指定してからli:first-child{border:none}で打ち消すという方法を使っていました…:not()を使ったほうがスマートに書けますね。復習して良かった。