CSS セレクタ

 

2019年09月17日

 

 

目次

  1. セレクタとは
  2. セレクタ一覧

セレクタとは

  • セレクタとは、デザインの適用対象を指定するものです。
  • セレクタとは、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セレクタの要素。

 

 

 

 

 

 

Programming Style