CSS 伪クラスリファレンスマニュアル

CSS修飾子

修飾子は、要素の特別な状態を定義するために使用されます。

例えば、これは以下のように使用できます：

  • ユーザーが要素にマウスを乗せたときにスタイルを設定します。
  • 訪問済みと未訪問のリンクに異なるスタイルを設定します。
  • 要素にフォーカスが当たったときにスタイルを設定します。
  • 有効/無効/必須/オプションのフォーム要素にスタイルを設定します。

以下の表は、CSSの異なる修飾子を示しています：

修飾子 例 例の説明
:active a:active アクティブなリンクを選択します。
:any-link a:anylink href属性を持つすべての <a> や <area> 要素を選択します。
:auto-fill input:autofill ブラウザが自動的に値を入力した <input> 要素のすべてを選択します。
:checked option:checked すべての選択された <input> や <option> 要素をマッチングします。
:default input:default 関連する要素グループのデフォルトのフォーム要素を選択します。
:defined :defined 標準的な要素またはカスタム要素のすべての定義された要素を選択します。
:dir() :dir(rtl) 指定されたテキスト方向を持つ要素を選択します。
:disabled option:disabled 無効なすべての要素を選択します。これは通常フォーム要素に使用されます。
:empty div:empty 子要素（テキストノードを含む）を持たないすべての要素を選択します。
:enabled input:enabled すべての有効な要素を選択します（フォーム要素に常用）。
:first @page :first 印刷文書の最初のページを示します（@page ルールと一緒に使用）。
:first-child p:first-child 兄弟要素の中で最初の子要素として選択される要素を選択します（兄弟要素のグループの中で）。
:first-of-type li:first-of-type 兄弟要素のグループの中で特定のタイプの最初の要素を選択します。
:focus select:focus フォーカスを取得した要素を選択します（フォーム要素に常用）。
:focus-visible button:focus-visible フォーカスを取得した要素を選択します（キーボードを通じてフォーカスを取得した場合にのみ焦点スタイルが適用されます）。
:focus-within form:focus-within 要素またはそのいかなる子孫もフォーカスを取得した要素を一致させます。
:fullscreen :fullscreen フルスクリーンモードにある現在の要素を選択します。
:has() h2:has(+p) <p> 要素の次に続く <h2> 要素を選択し、<h2> にスタイルを適用します。
:hover a:hover マウスオーバーしている要素を選択します。
:in-range input:in-range 指定範囲内の値を持つ <input> 要素を選択します。
:indeterminate input:indeterminate 不確定状態にあるフォーム要素を選択します。
:invalid input:invalid 無効なフォーム要素を選択します。
:is() :is(ul, ol) すべての <ul> と <ol> 元素を選択します。
:lang() p:lang(it) lang属性が"it"（イタリア語）の <p> 要素を選択します。
:last-child li:last-child 親要素の最後の子要素として選択される <li> 要素。
:last-of-type p:last-of-type 親要素の最後の <p> 要素として選択される <p> 要素。
:left @page :left 印刷文書のすべての左側ページを示します（@page ルールと一緒に使用）。
:link a:link すべての未訪問のリンクを選択します。
:modal :modal モーダル状態にある要素を選択します。
:not() :not(p) すべての <p> 要素でない要素を選択します。
:nth-child() p:nth-child(2) 親要素の第2子要素として選択される <p> 要素。
:nth-last-child() p:nth-last-child(2) 親要素の最後の2子要素である<p>要素を選択します。
:nth-last-of-type() p:nth-last-of-type(2) 親要素の最後の2<p>要素である<p>要素を選択します。
:nth-of-type() p:nth-of-type(2) 親要素の第2<p>要素である<p>要素を選択します。
:only-child p:only-child 親要素の唯一の子要素である<p>要素を選択します。
:only-of-type p:only-of-type 親要素の唯一の<p>要素である<p>要素を選択します。
:optional textarea:optional required属性を持たない<input>、<select>、または<textarea>要素を選択します。
:out-of-range input:out-of-range 指定された範囲を超えた値を持つ<input>要素を選択します。
:placeholder-shown input:placeholder-shown 現在プレースホルダーテキストを表示している<input>や<textarea>要素を選択します。
:popover-open :popover-open 表示されているポップアップ状態の要素を選択します。
:read-only input:read-only readonly属性を持つ入力要素を選択します。
:read-write input:read-write 編集可能な入力要素を選択します。
:required input:required required属性を持つ入力要素を選択します。
:right @page :right 印刷ドキュメントのすべての右側ページを示します（@pageルールと一緒に使用）。
:root :root ドキュメントのルート要素を選択します。
:scope :scope 選択器マッチングの参照点や範囲として選択される要素を選択します。
:state() :state() 指定されたカスタム状態を持つカスタム要素を選択します。
:target :target 現在アクティブなターゲット要素を選択します。
:user-invalid :user-invalid ユーザーと交互を行った後に無効な値を持つフォーム要素を選択します。
:user-valid :user-valid ユーザーと交互を行った後に有効な値を持つフォーム要素を選択します。
:valid input:valid 有効な値を持つ入力要素を選択します。
:visited a:visited 訪問したすべてのリンクを選択します。
:where() :where(ol, ul) すべての <ul> と <ol> 元素を選択します。