擬似クラス（pseudo-class）、擬似エレメント（pseudo-elements)
擬似クラス（pseudo-class）は、エレメント（要素）の変化や状態を示す CSS のセレクターです。 擬似クラスを使用することにより、エレメントの変化や状態によってスタイルを変えることができます。
a.example:link{
color: black;
text-decoration: none;
}
擬似クラスに似た擬似エレメントがあります。
擬似エレメントは、エレメントに追加できる仮のエレメントのようなものです。最初の文字、行、選択された部分といった指定方法による種類があります。
追加された仮のエレメントには文字などのコンテンツを表示することができます。
span.example::before{
content: "◯";
color: red;
}
ページ内 Index
擬似クラス（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> |
| :autofill | autocomplete属性などによって自動補完されるとスタイルを反映 | <FORM>部品 |
| :checked | <input type="radio">、<input type="checkbox">や<select>の<option>エレメントなどにおいて、checkedになっていればスタイルを反映 | <FORM>部品 |
| :default | デフォルト値が設定されていたら | <FORM>部品 |
| :defined | 定義済みのエレメント | エレメント全般 |
| :disabled | disabled属性が設定されたエレメントにスタイルを反映 | <FORM>部品 |
| :empty | 子エレメントがないエレメントにスタイルを反映 | エレメント全般 |
| :enabled | disabledでなければスタイルを反映。デフォルトでenabled | <FORM>部品 |
| :first | 印刷時の最初のページにスタイルを反映 | 印刷用 |
| :first-child | 複数あるエレメントの中で最初のエレメントが対象 | エレメント全般 |
| :first-of-type | １つまたは複数あるエレメントの中で最初のエレメントが対象 | エレメント全般 |
| :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-type | １つまたは複数あるエレメントの中で最後のエレメント（要素）が対象 | エレメント全般 |
| :left | 印刷時の左側のページに対して | 印刷用 |
| :link | 未訪問リンクにスタイルを反映 | <a> |
| :local-link | リンク先が現在閲覧中のページなら | <a> |
| :not() | カッコ内の指定以外の全てのエレメントに | エレメント全般 |
| :nth-child() | カッコ内の番号、キーワード、式に該当する子エレメントが対象 | エレメント全般 |
| :nth-last-child() | 複数あるエレメントのうちで、カッコ内の番号、キーワード、式に後ろから数えて該当するエレメントが対象 | エレメント全般 |
| :nth-last-of-type() | カッコ内の番号、キーワード、式に後ろから数えて該当する子エレメントが対象 | エレメント全般 |
| :nth-of-type() | 複数あるエレメントのうちで、カッコ内の番号、キーワード、式に該当するエレメントが対象 | エレメント全般 |
| :only-child | 同じ種類のエレメントが１つの場合 | エレメント全般 |
| :only-of-type | エレメントが唯一のタイプをもつ子エレメントである場合。 | エレメント全般 |
| :optional | required属性でないエレメントが対象 | <FORM>部品 |
| :out-of-range | 入力値が設定範囲外の場合 | <FORM>部品 |
| :picture-in-picture | 音声、動画 | |
| :placeholder-shown | placeholder属性の値が表示されている間 | <FORM>部品 |
| :paused | 音声、動画 | |
| :playing | 音声、動画 | |
| :read-only | read-only属性が設定されたエレメントが対象 | <FORM>部品 |
| :read-write | read-only属性が設定されていないエレメントが対象 | <FORM>部品 |
| :required | required属性が設定されたエレメントが対象 | <FORM>部品 |
| :right | 印刷時の右側のページに対して | 印刷用 |
| :root | ドキュメントのrootエレメントが対象 | エレメント全般 |
| :scope | セレクターが参照する元。今のところ:rootと同じ | エレメント全般 |
| :target | #（アンカー）のある<a>エレメントが対象です。#（アンカー）のある<a>エレメントをクリックするとその指定先に、スタイルを反映します。 | <a> |
| :valid | 入力値が設定内であるならスタイルを反映 | <FORM>部品 |
| :visited | 訪問済みリンクにスタイルを反映 | <a> |
| :where() | エレメント全般 |
多くのプログラムでは、ユーザによる操作（一般的には入出力）をeventとして扱います。
疑似クラスはこのeventに似た動きをします。
擬似クラスは、キーボード入力やマウス操作、エレメントの状態、JavaScriptによる表示内容に変化があると反応し、設定されたスタイルを適応します。
擬似エレメント（pseudo-elements)
擬似エレメントによって、エレメントにエレメントを追加することができます。
エレメント::pseudo-elements{
style_propaty: value;
...
}
::before や ::afterは、エレメントの先頭や最後尾に content プロパティでテキストを追加することもできます。
| pseudo-elements name | 摘要 |
|---|---|
| ::after | 対象エレメントの後に追加 |
| ::before | 対象エレメントの前に追加 |
| ::cue | WebVTTキュー |
| ::cue-region | WebVTTキュー |
| ::first-letter | 最初の文字にスタイルを適用 |
| ::first-line | 最初の行にスタイルを適用 |
| ::selection | 選択された内容のスタイルを適用 |
| ::slotted() | スロット内のエレメント Shadow DOMの用途 |