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