CSS1〜CSS3までのセレクタのまとめ
全称・タイプ・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 | 同階層で2番目の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 | 3の倍数番目 | |
例 (n) → 3n+1 | 1、4、7、10…番目 | |
E:first-of-type | 最初のE要素 ※他の要素はカウントしない | |
E:last-of-type | 最後のE要素 ※他の要素はカウントしない | |
E F:only-child | E要素内にF要素1つのみ存在の場合 ※他要素・F複数はダメ | |
E F:only-of-type | E要素内にF要素が1つのみ存在の場合 ※他要素がいても可 | |
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要素の最初の1文字 |
E::first-line | E要素の最初の1行 | |
E::before | E要素の直前 | |
E::after | E要素の直後 | |
例 前に☆ | ::before {contet: “☆”} |