KuzLog

KuzLog
2017/01/12 2018/01/13 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()を使ったほうがスマートに書けますね。復習して良かった。