mzgkworks.com

Stack the little bets.

CSS1〜CSS3までのセレクタのまとめ

   [Knowledge]    #CSS

全称・タイプ・ID・クラスセレクタ

パターン セレクタ名 適用範囲
* 全称 すべての要素
E タイプ E要素
例 E, F EとFの要素
#id_name ID id_nameというIDを持つすべての要素
例 E#id_name id_nameというIDを持つE要素
.class_name クラス class_nameというクラスを持つすべての要素
例 E.class_name class_nameというクラスを持つE要素

属性セレクタ

パターン セレクタ名 適用範囲
E[foo] 属性 foo属性を持つE要素
E[foo=“bar”] foo属性がbarの値だけを持つE要素
E[foo~=“bar”] foo属性がbarの値を持つE要素 ※class=“bar baz”など
E[foo^=“bar”] foo属性の値がbarで始まっているE要素 ※class=“barbal”など
E[foo$=“bar”] foo属性の値がbarで終わっているE要素 ※class=“balbar”など
E[foo*=“bar”] foo属性の値にbarが含まれるE要素 ※class=“fobarbaz”など
E[foo|=“bar”] foo属性の値が、bar または bar-bazのE要素

結合子セレクタ

パターン セレクタ名 適用範囲
E F 子孫 E要素の子孫であるF要素
E * E要素の子孫すべて
E .class_name E要素の子孫でclass_nameというクラスを持つ要素
.class_name E .class_nameを持つ要素の子孫であるE要素
E > F 子 E要素の子となるF要素 ※途中他要素の子になっているのは対象外
E + F 隣接 E要素に隣接（直後）しているF要素
E ~ F 間接 E要素の後ろにある同じ階層のF要素
例 div ~ p divと同階層でdivより後ろにあるpが適用
例 h2 ~ h2 同階層で２番目のh2から適用

構造擬似クラスセレクタ

パターン セレクタ名 適用範囲
E:first-child 構造擬似 最初のE要素（= nth-child(1)） ※最初のEより前の他要素もカウント
E:last-child 最後のE要素（= nth-last-child(1)） ※最後のEより後ろの他要素もカウント
E:nth-child(n) n番目のE要素 ※途中の他要素もカウント
E:nth-last-child(n) 最後からn番目のE要素 ※途中の他要素もカウント
E:nth-of-type(n) 最初からn番目に表れるE要素 ※途中の他要素はカウントしない
E:nth-last-of-type(n) 最後からn番目に表れるE要素 ※途中の他要素はカウントしない
例 (n) → 2n+1 or odd 奇数番目
例 (n) → 2n or even 偶数番目
例 (n) → 3n ３の倍数番目
例 (n) → 3n+1 １、４、７、１０…番目
E:first-of-type 最初のE要素 ※他の要素はカウントしない
E:last-of-type 最後のE要素 ※他の要素はカウントしない
E F:only-child E要素内にF要素１つのみ存在の場合 ※他要素・F複数はダメ
E F:only-of-type E要素内にF要素が１つのみ存在の場合 ※他要素がいても可
E:empty E要素内がカラの場合
:root 文書のルート要素（htmlに適用するのと同じ）

否定擬似クラスセレクタ

パターン セレクタ名 適用範囲
E:not(s) 否定擬似 sで指定するセレクタに該当しないE要素
例 body *:not(h1) h1以外すべての要素
例 p:not(.class_name) class_nameがついているp以外のすべてのp

リンク擬似クラスセレクタ

パターン セレクタ名 適用範囲
E:link リンク擬似 未訪問のリンク
E:visited 訪問済みのリンク

ユーザーアクション擬似クラスセレクタ

パターン セレクタ名 適用範囲
E:active ユーザーアクション クリック中の要素
E:hover カーソルが乗っている要素
E:focus フォーカスされた要素（入力欄で入力可能状態）
:target href=“#foo”のリンクを踏んだ際の、id=“foo”の要素

UI状態擬似クラスセレクタ

パターン セレクタ名 適用範囲
E:enabled UI状態擬似 E要素が有効状態（textareaなど）
E:disabled E要素が無効状態（textareaなど）
E:checked E要素がチェック状態（ラジオ・チェックボックス）
例 チェックボックス input[type=“checkbox”]:checked {}

言語情報擬似クラスセレクタ

パターン セレクタ名 適用範囲
E:lang(s) 言語情報 lang=“s”を持つE要素

擬似要素セレクタ

パターン セレクタ名 適用範囲
E::first-letter 擬似要素 E要素の最初の１文字
E::first-line E要素の最初の１行
E::before E要素の直前
E::after E要素の直後
例 前に☆ ::before {contet: “☆”}