CSS3

：

選択子（セレクター）

：

　 編集：2022.07.09 by T.A.

→●

セレクターは、その制御下にない部分を除いて、ASCII 大小無視。

E： E に合致する要素。
パターン 表現される選択対象
元素的な選択子
* 任意の要素→●
E 任意の E 要素→●
論理的な組み合せ
E:not(s1,s2,...) 合体選択子 s1、s2、…のどれにも合致しない E 要素。／[Edge]○
E:is(s1,s2,...) 合体選択子 s1、s2、…のどれかに合致する E 要素。／[Edge]○
E:where(s1,s2,...) 合体選択子 s1、s2、…のどれかに合致する E 要素 ― 加えて、詳細度にも寄与しない。
E:has(rs1,rs2,...) ［E 要素を :scope 要素とする下で［相対選択子 rs1、rs2,…のいずれか］を評価したとき］に、何らかの要素に合致する E 要素。
元素的な選択子における名前空間→●
ns|E 名前空間 ns に属するような、名前 E の要素
*|E どの名前空間にも属さないものも含め、任意の名前空間に属するような、名前 E の要素
|E どの名前空間にも属さない、名前 E の要素
E 既定の名前空間が宣言済みでない場合、これは *|E に等価になる。他の場合、 ns を既定の名前空間とするときの ns|E に等価になる。
定義済み疑似クラス
E:defined 定義済み疑似クラス→●
属性選択子
E.warning warning クラス に属する E 要素（要素が属するクラスがどう決定されるかは、文書言語が指定する）→●
E#myid ID が myid に等しい E 要素→●
E[foo] foo 属性を有する E 要素。値は問わない。→●
E[foo="bar"] foo 属性値が bar に等しい E 要素→●／[Edge]○
E[foo="bar" i] foo 属性値が ASCII 大小無視で bar に等しい E 要素→●
E[foo="bar" s] foo 属性値が bar に一致する E 要素→●
E[foo~="bar"] foo 属性値を空白で分離したリストを成す ある項が bar に等しい E 要素→●
E[foo^="bar"] foo 属性値が文字列 bar から始まる E 要素→●
E[foo$="bar"] foo 属性値が文字列 bar で終わる E 要素→●
E[foo*="bar"] foo 属性値が bar を部分文字列として包含する E 要素→●／[Edge]○
E[foo|="en"] foo 属性値をハイフンで分離したリストを成す最初の項が en に等しい E 要素→●
自然言語に関する疑似クラス
E:dir(var) 方向性が var の E 要素→●
E:lang(var) 言語が var である E 要素
所在 疑似クラス（以下における“リンク元”とは、ハイパーリンクのソース･アンカーを意味する）
E:any-link リンク元である E 要素
E:link ターゲットが未訪問なリンク元である E 要素
E:visited ターゲットが訪問済みなリンク元である E 要素
E:local-link 現在の URL をターゲットにしているリンク元である E 要素／[Edge]×？
E:target 現在の URL においてターゲットにされている E 要素／[Edge]×？
E:target-within 現在の URL においてターゲットにされているか、それを包含している E 要素
E:scope :scope 要素に指定されている E 要素
E:hover カーソルが指している要素、またはその要素を子孫に持つ E 要素
E:active 作動化された E 要素
E:focus 利用者入力のフォーカスを得ている E 要素
E:focus-visible 利用者入力のフォーカスを得ている E 要素のうち、ユーザーエージェントが［その要素用にフォーカス環その他の指示子を描くべきである］と決定した要素
E:focus-within 利用者入力のフォーカスを得ているか、それを包含している E 要素。
時系列 疑似クラス
E:current 時系列再生の下で現在呈示中の E 要素。
E:current(S) 最も深い :current 要素であって、選択子 S に合致する E 要素。
E:past 時系列再生の下で過去に現れた E 要素。
E:future 時系列再生の下で未来に現れる E 要素。
リソース状態
E:playing “再生している” E 要素。
E:paused “静止している” E 要素。
E:seeking シークしている E 要素。
E:buffering “バッファしている” E 要素。
E:stalled “停滞している” E 要素。
E:muted “消音された” E 要素。
E:volume-locked 音量をプログラム的に変更しても実質的なメディア音量は変化しない E 要素。
入力 疑似クラス（“UI”は“利用者インタフェース”の略語）
E:enabled 入力を可能化された E 要素。
E:disabled 入力を不能化された E 要素。
E:read-only UI 要素のうち、利用者が内容を改めれない E 要素。／[Edge]○
E:read-write UI 要素のうち、利用者が内容を改めれる E 要素。
E:placeholder-shown 利用者向けのヒントとして仮入力テキストを例示している E 要素。
E:default 一連の類似な要素の中で既定の選択肢にされている E 要素。
E:checked ユーザーインタフェース要素のうち、チェックまたは選択されている E 要素（ラジオボタンやチェックボックス用）。
E:indeterminate ユーザーインタフェース要素のうち、不定な（チェックの有無が未設定な）状態にある E 要素。
E:blank 利用者入力要素のうち、値が空欄である（空／欠落している）E 要素。
E:valid ユーザーインタフェース要素のうち、入力値が妥当である E 要素。
E:invalid UI 要素のうち、入力値が妥当でない E 要素。
E:in-range 利用者入力要素のうち、入力値が範囲内にある E 要素。
E:out-of-range 利用者入力要素のうち、入力値が範囲外にある E 要素。
E:required 利用者入力要素のうち、入力が必須である E 要素。
E:optional 利用者入力要素のうち、入力が必須でない E 要素。
E:user-valid 利用者入力要素のうち、利用者から正しい値が入力された E 要素【この項は、この訳による補完】。
E:user-invalid 利用者入力要素のうち、【利用者から】不正な値が入力された E 要素（妥当でない／範囲外である／必須にもかかわらず未入力にされた）。
ツリー構造上の 疑似クラス
E:root 文書の根である E 要素。
E:empty “空”な（子が無い） E 要素。
E:nth-child(指定) E 要素の指定 の子要素¶。
E:nth-last-child(指定) E 要素の最後からの指定の子要素¶。
E:first-child E 要素の最初の子要素。
E:last-child E 要素の最後の子要素。
E:only-child 自身の他に同じ同胞群に属する要素は無いもの¶。
E:nth-of-type(指定) 指定 のタイプに合致するもの¶。
E:nth-last-of-type(指定) 最後の子要素の指定の型に合致する E要素¶。
E:first-of-type 最初の子要素の型に合致する E 要素¶。
E:last-of-type 最後の子要素の型に合致する E 要素¶。
E:only-of-type ¶。
結合子
A B 子孫結合子（スペース）。Aの子孫である B→●
A > B 子結合子（ > ）。Aの子供である B→●
A + B 次‐同胞 結合子（ + ）。Aの直後である B→●
A ~ B 後続‐同胞 結合子（ ~ ）。Aの後続にある B→●
格子構造 選択子
A || B カラム結合子（ || ）。A の カラム要素 B→●
E:nth-col(指定) E の指定カラム。／[Edge]×？
E:nth-last-col(指定) E の最後のカラムからの指定 のカラム¶。
利用者動作 疑似要素
E::before E要素の直前にある要素。／[Edge]×？
E::after E要素の直後にある要素。
E::first-line E要素の最初の行。／[Edge]○
E::first-letter E要素の最初の文字。／[Edge]○
E::slotted() slot にあてがわれた内容の選択法。／[Edge]×？
疑似要素
E::marker マーカー要素のマーカーを示す。／[Edge]○
テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：