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

      2019/07/10

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

:before 擬似要素

li:before {
  content: "";
}

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

:after 擬似要素

li:after {
  content: "";
}

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

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

画像を表示する場合

content: url(画像パス);

擬似クラス

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

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

テーブルの特定列の装飾も可能

td:nth-of-type(1)

テーブルの1列目のセルのみの装飾が可能

「td:nth-of-type(3)」と記述した場合の意味
→複数のtd要素のうち、3番目に登場するtd要素
「td:nth-child(3)」と記述した場合の意味
→複数の子要素のうち、3番目の子要素がtd要素だった場合
参考:https://allabout.co.jp/gm/gc/440534/2/

0

 - stylesheet