疑似要素と疑似クラス #CSS3

擬似要素

「:」は2つ付けます。
1つの要素に1つまでしか指定できません。

疑似要素	意味
::after	要素の後に指定内容を追加
::before	要素の前に指定内容を追加
::cue	WebVTT(動画や音声の字幕やキャプションなど)にスタイルを適用
::first-letter	テキストの先頭1文字目にスタイルを適用
::first-line	テキストの先頭1行目にスタイルを適用
::selection	要素内の選択状態の部分にスタイルを適用

「:」は1つだけ付けます。
1つの要素に複数指定可能です。

:activeは他のリンク関連疑似クラスによって上書きされるので、「:link」→「:visited」→「:hover」→「:active」の順番で記述します。
「:link」と「:visited」は逆でも良いです。

疑似クラス	意味
:hover	カーソルが乗った時
:link	閲覧したことがないリンク
:visited	閲覧済みのリンク
:active	要素がアクティブになったとき(ボタンを押してから離すまでなど)

-child系　親要素から見た子要素を、指定の要素に関係なく数えます。(指定の要素が指定の順番にない場合は効かない)
-of-type系　親要素から見た子要素を、指定の要素だけを数えます。

疑似クラス	意味
:first-child	兄弟関係の中で最初の子要素
:first-of-type	兄弟関係にある同じ種類の要素の中で、最初の要素
:last-child	兄弟関係の中で最後の要素
:last-of-type	兄弟関係にある同じ種類の要素の中で、最後の要素
:only-child	兄弟を持たない要素
:only-of-type	兄弟関係の中で同じ要素の兄弟が一つもない要素
:nth-child(n)	兄弟関係のn番目の要素
:nth-of-type(n)	兄弟関係にある同じ種類の要素の中の、n番目の要素
:nth-last-child(n)	兄弟関係の最後から数えてn番目の要素
:nth-last-of-type(n)	兄弟関係にある同じ種類の要素の中の、最後からn番目の要素
:empty	子要素を一つも持たない要素

奇数番目　nに「odd」「2n+1」などを入れます。
偶数番目　nに「even」「2n」などを入れます。

疑似クラス	意味
:focus	フォームが入力状態
:focus-within	子や孫要素のフォームが入力状態
:disabled	入力が無効(disabled属性がある)
:enabled	入力が有効(disabled属性がない)
:checked	ラジオボタン、チェックボックスなどがチェックされてる時
:indeterminate	ラジオボタン、チェックボックスなどがチェックされてるかどうか不確定の状態の時
:default	ラジオボタン、チェックボックスなどが最初から選択されている状態
:required	入力必須項目(required属性がある)
:optional	任意の入力項目(required属性がない)
:read-only	入力できない項目(readonly属性がある)
:read-write	入力できる項目(readonly属性がない)
:in-range	値が制限範囲内の状態(最大値、最小値設定ありの時)
:out-of-range	値が制限範囲外の状態(最大値、最小値設定ありの時)
:valid	入力された値が形式的に正しい状態
:invalid	入力された値が形式的に正しくない状態

疑似クラス	意味
:defined	定義したCSSを他の要素に追加できる
:lang()	要素が指定された言語であるとき
:not()	()内に指定した以外の要素
:root	ドキュメントルートの要素
:target	アンカーリンク先の要素に対して、リンククリック後のCSSを指定

疑似クラスが先で、疑似要素が後です。

css

:last-child::before