備忘録的プログラミングリファレンス

擬似クラス（pseudo-class）

　擬似クラス（pseudo-class）は、エレメント（要素）の状態によるスタイル指定を行うことができるセレクターです。
　書き方は、

エレメント:pseudo-class{

}

といった書き方をします。
　多くのプログラムでは、ユーザによる操作（一般的には入出力）をeventといいます。cssでも、キーボード入力やマウス操作に反応するeventのようなことができ、それを擬似クラスで扱います。
　擬似クラスには以下があります。 擬似クラスにはeventのようにユーザの操作に反応するクラスもありますが、:first-childのように最初の子要素というようにwebページの構成要素を静的に自動で抽出するクラスもあります。さらに擬似要素があります。

pseudo-class name摘要
:activeユーザーの操作で要素がアクティブになったときに、スタイルを反映します。a:activeは“クリックされてから離されるまでの状態”です。
:checkedinputエレメントやoptionエレメントなどにおいて、checkedになっていれば、スタイルを反映します。
:disableddisabledになっていれば、スタイルを反映します。多くはformエレメントの子エレメント、inputなどです。
:empty子エレメントがないエレメントに、スタイルを反映します。
:enabledenabledになっていれば、スタイルを反映します。多くはformエレメントの部品（子エレメント、inputなど）です。デフォルトではenabledです。
:first-child複数あるエレメントの内で最初のエレメント（要素）に、スタイルを反映します。
:first-of-type複数ある特定のタイプのエレメントの内で最初のエレメント（要素）に、スタイルを反映します。
:focusエレメントが入力待ち（フォーカス）であるなら、スタイルを反映します。
:hoverエレメントにカーソルが乗ったら
:in-range入力値がエレメントのパラメータの設定範囲内であるなら、スタイルを反映します。多くが<form>エレメントの部品（子エレメント）です。
:invalid入力値が設定外の場合は、スタイルを反映します。多くが<form>エレメントの部品（子エレメント）です。
:lang()括弧内の言語指定とエレメントに設定された言語が同じなら、スタイルを反映します。
:last-child複数あるエレメントの内で最後のエレメント（要素）を対象です。
:last-of-type複数ある特定のタイプのエレメントの内で最後のエレメント（要素）が対象です。
:link未訪問リンクに、スタイルを反映します。
:not()括弧内の指定以外のエレメントが対象です。
:nth-child()複数あるエレメントで括弧内の指定が対象です。括弧内の番号、キーワード、式で指定します。
:nth-last-child()複数あるエレメントが対象です。最後から数えて何番目かを括弧内で指定します。
:nth-last-of-type()複数ある特定のタイプのエレメントが対象です。最後から数えて何番目かを括弧内で指定します。
:nth-of-type()複数ある特定のタイプのエレメントが対象です。括弧内の番号、キーワード、式で指定します。
:only-childエレメントが唯一の子エレメントである場合。子エレメントが1つしかない場合です。
:only-of-typeエレメントが唯一のタイプをもつ子エレメントである場合。
:optionalrequiredパラメーターでない要素が対象です。<form>エレメントの部品（子エレメント<input>、<textarea>、<select>）です。
:out-of-range入力値が設定範囲外の場合に、スタイルを反映します。。多くが<form>エレメントの部品（子エレメント）です。
:read-onlyread-onlyパラメーターが設定されたエレメントが対象です。
:read-write読むことも入力することもできるエレメントが対象です。何もパラメーターが設定されていないなら該当します。
:requiredrequiredパラメーターが設定されたエレメントに、スタイルを反映します。。
:rootドキュメントのrootエレメントに、スタイルを反映します。
:target#（アンカー）のある<a>エレメントが対象です。#（アンカー）のある<a>エレメントをクリックするとその指定先に、スタイルを反映します。
:valid入力値がエレメントのパラメーターの設定内であるなら、スタイルを反映します。
:visited訪問済みリンクに、スタイルを反映します。

擬似エレメント（pseudo-elements)

pseudo-elements name摘要
::after内容の後に追加
::before内容の前に追加
::cueWebVTTキュー
::first-letter最初の文字にスタイルを適用
::first-line最初の行にスタイルを適用
::selection選択された内容のスタイルを適用
::slotted()スロット内のエレメント