このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSセレクタ一覧

CSS辞書
CSS3のセレクタ、擬似クラス、擬似要素の一覧

セレクタ

要素型セレクタ

セレクタ 説明
タイプ・セレクタ 要素で選択する
* 要素にかかわらず選択する

属性セレクタ

セレクタ 説明
属性セレクタ 属性と値で選択する
クラス・セレクタ クラス名で選択する
IDセレクタ ID名で選択する

結合子

結合子 説明
_ 子孫要素の選択
> 子要素の選択
+ 隣接する兄弟要素の選択
~ 後続する兄弟要素の選択
|| 同列要素の選択

擬似クラス

論理結合

擬似クラス 説明
:is() セレクタ・リストの中のいずれかに一致する要素を選択
:not() セレクタ・リストの中のいずれにも一致しない要素を選択
:where()
:has()

要素

擬似クラス 説明
:defined

言語

擬似クラス 説明
:dir()
:lang()

位置

擬似クラス 説明
:any-link ハイパーリンクを選択
:link 未訪問のハイパーリンクを選択
:visited 訪問済のハイパーリンクを選択
:local-link
:target
:target-within
:scope

ユーザー操作

擬似クラス 説明
:hover ホバーされている要素を選択
:active アクティブ化されている要素を選択
:focus フォーカスされている要素を選択
:focus-visible
:focus-within フォーカスされているか子孫要素がフォーカスされている要素を選択

時間次元

擬似クラス 説明
:current
:past
:future

要素の表示状態

擬似クラス 説明
:open
:closed
:modal
:fullscreen
:picture-in-picture

リソース状態

擬似クラス 説明
:playing
:paused
:seeking
:buffering
:stalled
:muted
:volume-locked

入力

擬似クラス 説明
: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

グリッド構造

擬似クラス 説明
:nth-col()
:nth-last-col()

擬似要素

活字

擬似要素 説明
::first-line
::first-letter

強調

擬似要素 説明
::selection
::target-text
::spelling-error
::grammer-error

ツリー依存

擬似要素 説明
::before
::after
::marker
::placeholder
::file-selector-button
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク