CSSメディア特性主要一覧
CSSメディアクエリで使われる代表的なメディア特性を、分類・値の種類・用途例とあわせて整理した非公開検証用データ。
| pseudo_class | matches_ja | example | note |
|---|---|---|---|
| :hover | ポインタが乗っている要素 | a:hover | マウスオーバー時 |
| :focus | フォーカスされた要素 | input:focus | キーボード操作等で選択中 |
| :focus-visible | キーボード操作時のフォーカス | button:focus-visible | 可視フォーカスのみ |
| :focus-within | 子孫にフォーカスを含む要素 | form:focus-within | 内部にフォーカスがある親 |
| :active | 押下中の要素 | a:active | クリックの瞬間 |
| :visited | 訪問済みのリンク | a:visited | 閲覧履歴に依存 |
| :link | 未訪問のリンク | a:link | href付きの未訪問 |
| :first-child | 親の最初の子要素 | li:first-child | 先頭の子 |
| :last-child | 親の最後の子要素 | li:last-child | 末尾の子 |
| :only-child | 唯一の子要素 | p:only-child | 兄弟がいない子 |
| :nth-child(n) | n番目の子要素 | li:nth-child(2n) | 偶数番など式で指定 |
| :first-of-type | 同種で最初の要素 | p:first-of-type | 同じ型の先頭 |
| :last-of-type | 同種で最後の要素 | p:last-of-type | 同じ型の末尾 |
| :nth-of-type(n) | 同種でn番目の要素 | p:nth-of-type(3) | 型ごとに数える |
| :empty | 子を持たない要素 | div:empty | テキストも含めて空 |
| :not(s) | sに一致しない要素 | :not(.active) | 否定セレクタ |
| :is(s) | いずれかに一致する要素 | :is(h1,h2) | 簡潔にまとめる |
| :where(s) | :isと同じだが詳細度0 | :where(h1,h2) | 詳細度を上げない |
| :has(s) | sを子孫に持つ要素 | div:has(img) | 親選択が可能 |
| :checked | 選択状態の入力 | input:checked | チェック/選択中 |