擬似要素・擬似クラスの覚書

      2016/11/22

いっつもわからなくなるので自分用覚書です。
覚書なので使い方や解説がほしい方はスタイルシートリファレンスなどをご確認ください。
サンプルはli

:before 擬似要素

li:before {
  content: "";
}

要素の直前に内容を挿入する

:after 擬似要素

li:after {
  content: "";
}

要素の直後に内容を挿入する

:beforeも:afterもcontentプロパティが必要(ここをいつも忘れる…)

画像を表示する場合

content: url(画像パス);

擬似クラス

:first-child 一番最初に現れる子要素にスタイルを適用する
:nth-child(n) n番目だけにスタイルを適用する
:nth-child(2n) 偶数行だけににスタイルを適用する
:last-child 最後に現れる子要素にスタイルを適用する

:last-child:after 最後に現れる子要素のアフターだけ

 - stylesheet