Sep. 12th,2021
CSSの擬似クラス
＃
“擬似クラス”とは？
“擬似クラス(Pseudo-classes)”単純セレクタの一種で、文書ツリーの構造に依らない情報によって要素を選択したり、他の単純セレクタでは表現するのが難しかったり、不可能だったりする要素の選択を表現するために使用されます。
特定の要素が擬似クラスに選択されるかどうかは動的に変化し、文書の構造が変わらなかったとしてもユーザーの操作によって要素は擬似クラスに選択されるようになったり、選択されなくなったりします。
擬似クラスはコロン(U+003A、“:”)に続く識別子である擬似クラス名で表されます。“関数擬似クラス(Functional pseudo-class)”である場合は直後に丸括弧(“(”と“)”)で囲まれた引数が続きます。
擬似クラス名は英字の大文字と小文字は区別されません。また、コロンと擬似クラス名の間と擬似クラス名と関数擬似クラスの丸括弧の間にはホワイトスペースを挿入してはいけません。
擬似クラスは他の単純セレクタと同様に合成セレクタに含むことができます。合成セレクタにタイプ・セレクタもしくは全称セレクタが含まれる場合には擬似クラスはそれよりも後に記述しなければなりません。
＃
仕様書
定義されている仕様書
擬似クラスの一覧
＃
＃
＃
＃
＃
ユーザー操作
| 擬似クラス | 説明 |
|---|---|
| :hover | ホバーされている要素を選択 |
| :active | アクティブ化されている要素を選択 |
| :focus | フォーカスされている要素を選択 |
| :focus-visible | |
| :focus-within | フォーカスされているか子孫要素がフォーカスされている要素を選択 |
＃
＃
＃
＃
入力
| 擬似クラス | 説明 |
|---|---|
| :enabled | 有効化されている要素を選択 |
| :disabled | 無効化されている要素を選択 |
| :read-only | ユーザーが編集できない要素を選択 |
| :read-write | ユーザーが編集できる要素を選択 |
| :placeholder-shown | |
| :autofill | |
| :default | |
| :checked | |
| :indeterminate | |
| :blank | |
| :valid | 入力値が妥当な要素を選択 |
| :invalid | 入力値が妥当でない要素を選択 |
| :in-range | |
| :out-of-range | |
| :required | |
| :optional | |
| :user-valid | |
| :user-invalid |
＃
ツリー構造
| 擬似クラス | 説明 |
|---|---|
| :root | 文書のルート要素を選択 |
| :empty | |
| :nth-child() | |
| :nth-last-child() | |
| :first-child | |
| :last-child | |
| :only-child | |
| :nth-of-type() | |
| :nth-last-of-type() | |
| :first-of-type | |
| :last-of-type | |
| :only-of-type |
＃
