[CSS]擬似クラス擬似要素:まとめ

最終更新日:2021.10.01 [金] 公開日:2017.11.19 [日] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

擬似クラスとてもよく使うので、備忘的にまとめます。




基本のhtmlベース

html

【:first-child :last-child】要素内の最初の子要素と最後の子要素の指定

CSS

表示

ここに説明文が入ります

  • リスト1
  • リスト1
  • リスト1
  • リスト1
  • リスト1

ここにまとめが入ります

【:nth-child(n)】親要素の中のn番目の子要素の指定

CSS

表示

ここに説明文が入ります

  • リスト1
  • リスト1
  • リスト1
  • リスト1
  • リスト1

ここにまとめが入ります

【:nth-child(enev)】【:nth-child(odd)】親要素の中の偶数(even)奇数(odd)

CSS

表示

ここに説明文が入ります

  • リスト1
  • リスト1
  • リスト1
  • リスト1
  • リスト1

ここにまとめが入ります

【:nth-of-type(n)】指定した子要素の種類限定のn番目

CSS

表示

ここに説明文が入ります

  • リスト1
  • リスト1
  • リスト1
  • リスト1
  • リスト1

ここにまとめが入ります

【:empty】空の要素を指定

CSS

表示

ここに説明文が入ります

  • リスト1
  • リスト1
  • リスト1
  • ↑テストのため空要素入れました。

  • リスト1
  • リスト1

ここにまとめが入ります

【:not】否定擬似クラス

CSS

表示

ここに説明文が入ります

  • リスト1
  • リスト1
  • リスト1
  • リスト1
  • リスト1

ここにまとめが入ります

【::before】【::after】要素の前後にスタイルを当てる

CSS

表示

ここに説明文が入ります

  • リスト1
  • リスト1
  • リスト1
  • リスト1
  • リスト1

ここにまとめが入ります


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA