目次
セレクタとは
- セレクタとは、デザインの適用対象を指定するものです。
- セレクタとは、HTMLのツリー構造内に含まれる要素の特定パターンを表します。
- セレクタには、ユニバーサルセレクタ(全称セレクタ)、タイプセレクタ、IDセレクタ、クラスセレクタ、属性セレクタ、擬似クラス、結合子などがあります。
セレクタ一覧
下の検索ボックスでセレクタパターンによる絞り込み検索ができます。
該当するセレクタパターンが見つかりません。
ユニバーサルセレクタ
セレクタパターン | 適用対象 |
---|---|
* |
すべての要素。 |
タイプセレクタ
セレクタパターン | 適用対象 |
---|---|
E |
E要素。 |
IDセレクタ
セレクタパターン | 適用対象 |
---|---|
E#name |
id属性値がnameであるE要素。 |
クラスセレクタ
セレクタパターン | 適用対象 |
---|---|
E.name |
class属性値がnameであるE要素。 |
属性セレクタ
セレクタパターン | 適用対象 |
---|---|
E[name] |
name属性を持つE要素。 |
E[name="value"] |
name属性を持ち、その属性値がvalueであるE要素。属性値は完全一致している必要がある。 |
E[name~="value"] |
name属性を持ち、その属性値がvalueであるE要素。空白で区切られたいずれかの属性値と一致している必要がある。 |
E[name^="value"] |
name属性を持ち、その属性値がvalueで始まるE要素。 |
E[name$="value"] |
name属性を持ち、その属性値がvalueで終わるE要素。 |
E[name*="value"] |
name属性を持ち、その属性値にvalueが含まれているE要素。 |
E[name|="value"] |
name属性を持ち、その属性値がvalueであるE要素。属性値が完全一致しているか、ハイフン区切りの値(言語コード「en-us」など)の前半が一致している必要がある。 |
擬似クラス
セレクタパターン | 適用対象 |
---|---|
E:active |
アクティブ状態(マウスのボタンなどで押されている状態)になっているE要素。 |
E:checked |
チェックや選択されている入力部品を持つE要素(ラジオボタンやチェックボックスなど) 。 |
E:default |
関連する選択肢の中で既定値の項目であるE要素。 |
E:disabled |
非活性状態になっているE要素。 |
E:empty |
子要素や要素内容を持たないE要素。 |
E:enabled |
活性状態になっているE要素。 |
E:first-child |
兄弟要素の中で最初の要素であるE要素。 |
E:first-of-type |
兄弟要素の中で同じ種類の先頭の要素であるE要素。 |
E:focus |
ユーザの入力フォーカスを持つE要素。 |
E:hover |
カーソルの下にあるE要素。 |
E:invalid |
入力内容の検証に失敗した入力部品を持つE要素。 |
E:in-range |
現在の値がmax属性もしくはmin属性による制限範囲内にあるE要素。 |
E:lang(C) |
lang属性がC言語コードであるE要素。 |
E:last-child |
兄弟要素の中で最後の要素であるE要素。 |
E:last-of-type |
兄弟要素の中で同じ種類の最後の要素であるE要素。 |
E:link |
ハイパーリンク先が未参照である参照元のE要素。 |
E:not(S) |
Sセレクタ以外のE要素(セレクタはカンマ区切りで複数指定することも可)。 |
E:nth-child(n [of S]) |
Sセレクタに一致する親要素の先頭から数えてn番目の子要素であるE要素。 |
E:nth-last-child(n [of S]) |
Sセレクタに一致する親要素の最後から数えてn番目の子要素であるE要素。 |
E:nth-last-of-type(n) |
兄弟要素の中で同じ種類の最後から数えてn番目の要素であるE要素。 |
E:nth-of-type(n) |
兄弟要素の中で同じ種類の先頭から数えてn番目の要素であるE要素。 |
E:only-child |
兄弟要素がないE要素。 |
E:only-of-type |
兄弟要素に同じ種類の要素がないE要素(同じ階層にE要素が1つしかない場合に適用される)。 |
E:optional |
ユーザーからの入力が必須ではない入部品力を持つE要素。 |
E:out-of-range |
現在の値がmax属性もしくはmin属性による制限範囲外にあるE要素。 |
E:placeholder-shown |
プレースホルダーが表示されているE要素。 |
E:read-only |
ユーザーによる入力(編集)ができない(ロックなどされている)入力部品を持つE要素 |
E:read-write |
ユーザーによる入力(編集)ができる入力部品を持つE要素。 |
E:required |
ユーザーからの入力が必須である入力部品を持つE要素。 |
E:root |
HTMLのツリー構造におけるルート要素(一番上位の要素)であるE要素。 |
E:target |
ハイパーリンク先URLの最後が「#○○○」となっているハイパーリンクをクリックした時に、遷移先ページでターゲットとなるE要素(id属性値が「○○○」である要素)。 |
E:valid |
入力内容の検証に成功した入力部品を持つE要素。 |
E:visited |
ハイパーリンク先が参照済である参照元のE要素。 |
結合子
セレクタパターン | 適用対象 |
---|---|
S1 S2 |
S1セレクタの子孫要素であるS2セレクタの要素。 ※ S1とS2の間には空白文字 |
S1 > S2 |
S1セレクタの子要素であるS2セレクタの要素。 |
S1 + S2 |
兄弟要素の中でS1セレクタの直後にあるS2セレクタの要素。 |
S1 ~ S2 |
兄弟要素の中でS1セレクタよりも後にあるS2セレクタの要素。 |