TOP > CSSリファレンス > CSS pseudo-class pseudo-elements

擬似クラス(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 
::first-letter 
::first-line 
::selection