擬似クラス(pseudo-class)
擬似クラス(pseudo-class)は、エレメント(要素)の状態によるスタイル指定を行うことができるセレクターです。
書き方は、
エレメント:pseudo-class{ }
といった書き方をします。
多くのプログラムでは、ユーザによる操作(一般的には入出力)をeventといいます。cssでも、キーボード入力やマウス操作に反応するeventのようなことができ、それを擬似クラスで扱います。
擬似クラスには以下があります。
擬似クラスにはeventのようにユーザの操作に反応するクラスもありますが、:first-childのように最初の子要素というようにwebページの構成要素を静的に自動で抽出するクラスもあります。さらに擬似要素があります。
pseudo-class name | 摘要 |
---|---|
:active | ユーザーの操作で要素がアクティブになったときに、スタイルを反映します。a:activeは“クリックされてから離されるまでの状態”です。 |
:checked | inputエレメントやoptionエレメントなどにおいて、checkedになっていれば、スタイルを反映します。 |
:disabled | disabledになっていれば、スタイルを反映します。多くはformエレメントの子エレメント、inputなどです。 |
:empty | 子エレメントがないエレメントに、スタイルを反映します。 |
:enabled | enabledになっていれば、スタイルを反映します。多くは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 | エレメントが唯一のタイプをもつ子エレメントである場合。 |
:optional | requiredパラメーターでない要素が対象です。<form>エレメントの部品(子エレメント<input>、<textarea>、<select>)です。 |
:out-of-range | 入力値が設定範囲外の場合に、スタイルを反映します。。多くが<form>エレメントの部品(子エレメント)です。 |
:read-only | read-onlyパラメーターが設定されたエレメントが対象です。 |
:read-write | 読むことも入力することもできるエレメントが対象です。何もパラメーターが設定されていないなら該当します。 |
:required | requiredパラメーターが設定されたエレメントに、スタイルを反映します。。 |
:root | ドキュメントのrootエレメントに、スタイルを反映します。 |
:target | #(アンカー)のある<a>エレメントが対象です。#(アンカー)のある<a>エレメントをクリックするとその指定先に、スタイルを反映します。 |
:valid | 入力値がエレメントのパラメーターの設定内であるなら、スタイルを反映します。 |
:visited | 訪問済みリンクに、スタイルを反映します。 |
擬似エレメント(pseudo-elements)
pseudo-elements name | 摘要 |
---|---|
::after | 内容の後に追加 |
::before | 内容の前に追加 |
::cue | WebVTTキュー |
::first-letter | 最初の文字にスタイルを適用 |
::first-line | 最初の行にスタイルを適用 |
::selection | 選択された内容のスタイルを適用 |
::slotted() | スロット内のエレメント |
関連(Related)
HTML、CSS、DOMの基本用途一覧です。基本としていますが、公の基準ではありません。
HTML
CSS
- コメントアウト
- /* , */
- @ルール(at-rule)
- @import、 @media
- 一括指定
- all
- 最優先
- !important
- 擬似クラス、疑似エレメント
- 擬似クラス、疑似エレメント
DOM
- コメントアウト
- /* , */ もしくは 行頭に // (JavaScriptのコメントアウトです)
Event、Node
- インターフェイス
- EventTarget、 Event、 Node、 NodeList
- イベント
- error、 fullscreenchange、 fullscreenerror
- プロパティ
- bubbles、 cancelable、 currentTarget、 defaultPrevented、 detail、 eventPhase、 isTrusted、 target、 timeStamp、 type、 view
- メソッド
- preventDefault()、 stopImmediatePropagation()、 stopPropagation()
クッキー、Web Storage
- インターフェイス
- StorageEvent
- イベント
- プロパティ
- メソッド