擬似エレメントはエレメントに仮のエレメントを追加します。" />
備忘録的プログラミングリファレンス

擬似クラス(pseudo-class)、擬似エレメント(pseudo-elements)

 擬似クラス(pseudo-class)は、エレメント(要素)の変化や状態を表すセレクターです。 エレメントの変化や状態によってスタイルを定義できます。

例:擬似クラス
a.example:link{
	color: black;
	text-decoration: none;
}

 擬似クラスに似た擬似エレメントがあります。 擬似エレメントはエレメントに仮のエレメントの追加、最初の文字、行、選択された部分のみをエレメントして扱うことができます。追加された仮のエレメントには文字などのコンテントを表示することができます。

例:擬似エレメント
span.example::before{
	content: "◯";
	color: red;
}

擬似クラス(pseudo-class)

 擬似クラス(pseudo-class)は、以下のような書き方をします。

エレメント:pseudo-class{
	style_propaty: value;
	...
}

 擬似クラスには以下があります。 擬似クラスにはeventのようにユーザの操作に反応するクラスもありますが、:first-childのように最初の子要素というようにwebページの構成要素を静的に自動で抽出するクラスもあります。

 Shadow DOMについては、大規模なwebサイトの開発用に用意されたもので事前に設定が必要です。ここでは割愛しています。

実験的なクラス...

pseudo-class name概要種類
:activeユーザーの操作で要素がアクティブになったときにスタイルを反映。a:activeは“クリックされてから離されるまでの状態”<a>
:any-linkリンク機能をもつエレメントにスタイルを反映<a>
:autofillautocomplete属性などによって自動補完されるとスタイルを反映<FORM>部品
:checked<input type="radio">、<input type="checkbox">や<select>の<option>エレメントなどにおいて、checkedになっていればスタイルを反映<FORM>部品
:defaultデフォルト値が設定されていたら<FORM>部品
:defined定義済みのエレメントエレメント全般
:disableddisabled属性が設定されたエレメントにスタイルを反映<FORM>部品
:empty子エレメントがないエレメントにスタイルを反映エレメント全般
:enableddisabledでなければスタイルを反映。デフォルトでenabled<FORM>部品
:first印刷時の最初のページにスタイルを反映印刷用
:first-child複数あるエレメントの中で最初のエレメントが対象エレメント全般
:first-of-type1つまたは複数あるエレメントの中で最初のエレメントが対象エレメント全般
:fullscreenフルスクリーン(全画面)モードにおいてエレメント全般
:focusエレメントが入力待ち(フォーカス)であるなら<FORM>部品<a>
:focus-visibleエレメントが入力待ち(フォーカス)であり可視化する必要があるとき<FORM>部品<a>
:focus-within子エレメントに入力待ち(フォーカス)があるなら<FORM>部品<a>
:host開発用Shadow DOMのホストShadow DOM
:host()開発用Shadow DOMのホストを選択Shadow DOM
:hoverエレメントにカーソルが乗ったらエレメント全般
:indeterminate入力値が必要だが何も設定されていない場合<FORM>部品<progress>
:in-range入力値が設定範囲内であるなら<FORM>部品
:invalid入力値が設定範囲外であるなら<FORM>部品
:is()複数のセレクターを一括設定エレメント全般
:lang()括弧内の言語指定とエレメントの言語が同じ。<html>のlang属性や<meta>情報などに基づきます。言語
:last-child複数あるエレメントの中で最後のエレメント(要素)が対象エレメント全般
:last-of-type1つまたは複数あるエレメントの中で最後のエレメント(要素)が対象エレメント全般
:left印刷時の左側のページに対して印刷用
:link未訪問リンクにスタイルを反映<a>
:local-linkリンク先が現在閲覧中のページなら<a>
:not()カッコ内の指定以外の全てのエレメントにエレメント全般
:nth-child()カッコ内の番号、キーワード、式に該当する子エレメントが対象エレメント全般
:nth-last-child()複数あるエレメントのうちで、カッコ内の番号、キーワード、式に後ろから数えて該当するエレメントが対象エレメント全般
:nth-last-of-type()カッコ内の番号、キーワード、式に後ろから数えて該当する子エレメントが対象エレメント全般
:nth-of-type()複数あるエレメントのうちで、カッコ内の番号、キーワード、式に該当するエレメントが対象エレメント全般
:only-child同じ種類のエレメントが1つの場合エレメント全般
:only-of-typeエレメントが唯一のタイプをもつ子エレメントである場合。エレメント全般
:optionalrequired属性でないエレメントが対象<FORM>部品
:out-of-range入力値が設定範囲外の場合<FORM>部品
:picture-in-picture音声、動画
:placeholder-shownplaceholder属性の値が表示されている間<FORM>部品
:paused音声、動画
:playing音声、動画
:read-onlyread-only属性が設定されたエレメントが対象<FORM>部品
:read-writeread-only属性が設定されていないエレメントが対象<FORM>部品
:requiredrequired属性が設定されたエレメントが対象<FORM>部品
:right印刷時の右側のページに対して印刷用
:rootドキュメントのrootエレメントが対象エレメント全般
:scopeセレクターが参照する元。今のところ:rootと同じエレメント全般
:target#(アンカー)のある<a>エレメントが対象です。#(アンカー)のある<a>エレメントをクリックするとその指定先に、スタイルを反映します。<a>
:valid入力値が設定内であるならスタイルを反映<FORM>部品
:visited訪問済みリンクにスタイルを反映<a>
:where()エレメント全般

 多くのプログラムでは、ユーザによる操作(一般的には入出力)をeventとして扱います。 疑似クラスはこのeventに似た動きをします。
 擬似クラスは、キーボード入力やマウス操作、エレメントの状態、JavaScriptによる表示内容に変化があると反応し、設定されたスタイルを適応します。

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

 擬似エレメントによって、エレメントにエレメントを追加することができます。
 エレメントの先頭や最後尾に自動でテキストを追加することができます。

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