【CSS】セレクタ一覧

Ads by Google

個人的な備忘録を兼ねて。
CSSS3 の疑似セレクタを含めた一覧表を掲載しておきます。
有事の際にご利用ください。

セレクタパターン 意味 セレクタの種類 CSSレベル
* すべての要素を対象にするセレクタ ユニバーサルセレクタ 2
E E要素に対してスタイルを適用 タイプセレクタ 1
E[foo] foo属性を持つE要素に対してスタイルを適用 属性セレクタ 2
E[foo="bar"] barという値のfoo属性を持つE要素に対してスタイルを適用 属性セレクタ 2
E[foo~="bar"] barという値を1つでも含んでいるfoo属性を持つE要素に対してスタイルを適用 属性セレクタ 2
E[foo^="bar"] barという値から始まるfoo属性を持つE要素に対してスタイルを適用 属性セレクタ 3
E[foo$="bar"] barという値で終わるfoo属性を持つE要素に対してスタイルを適用 属性セレクタ 3
E[foo*="bar"] barという文字列を含むfoo属性を持つE要素に対してスタイルを適用 属性セレクタ 3
E[hreflang|="en"] en(言語)という値のhreflang属性をもつE要素に対してスタイルを適用 属性セレクタ 2
E:root ドキュメント内のルート要素である E という要素にスタイルを適用(HTMLの場合はhtml) 擬似クラス 3
E:nth-child(n) 親要素の n 番目の子要素である E 要素にスタイルを適用 擬似クラス 3
E:nth-last-child(n) 親要素の 最後から数えてn番目の子要素である E 要素にスタイルを適用 擬似クラス 3
E:nth-of-type(n) 兄弟関係にある n 番目の E 要素にスタイルを適用 擬似クラス 3
E:nth-last-of-type(n) 兄弟関係にある 最後から数えてn 番目の E 要素にスタイルを適用 擬似クラス 3
E:first-child 親要素の最初の子要素である E 要素にスタイルを適用 擬似クラス 2
E:last-child 親要素の最後の子要素である E 要素にスタイルを適用 擬似クラス 3
E:first-of-type 兄弟関係にある最初の E 要素にスタイルを適用 擬似クラス 3
E:last-of-type 兄弟関係にある最後の E 要素にスタイルを適用 擬似クラス 3
E:only-child 親要素の唯一の(兄弟関係を持たない) 子要素であるE要素にスタイルを適用 擬似クラス 3
E:only-of-type 兄弟関係にあるE要素にスタイルを適用 擬似クラス 3
E:empty テキストノードも含めて子要素を持たないE要素にスタイルを適用 擬似クラス 3
E:link 未訪問のハイパーリンクのソースのアンカーであるE要素にスタイルを適用 リンク擬似クラス 1
E:visited 訪問済みハイパーリンクのソースのアンカーであるE要素にスタイルを適用 リンク擬似クラス 1
E:active クリックなどでアクティブになったE要素にスタイルを適用 ダイナミック擬似クラス 1
E:hover マウスポインタで指し示されたE要素にスタイルを適用 ダイナミック擬似クラス 1
E:focus タブキーなどでフォーカスされているときのE要素にスタイルを適用 ダイナミック擬似クラス 2
E:target 参照URIの目標であるE要素にスタイルを適用 ターゲット擬似クラス 3
E:lang(fr) 前方一致で fr という lang 属性値を持つE要素にスタイルを適用 言語擬似クラス 2
E:enabled 有効な (:enabled)E要素にスタイルを適用 UI 要素状態擬似クラス 3
E:disabled 無効な (:disabled)E要素にスタイルを適用 UI 要素状態擬似クラス 3
E:checked ラジオボタンあるいはチェックボックスがチェックされた状態のときにE要素にスタイルを適用 UI 要素状態擬似クラス 3
E::first-line E要素の最初の 1行にスタイルを適用 擬似要素 1
E::first-letter E要素の最初の 1文字にスタイルを適用 擬似要素 1
E::selection ユーザが選択したE要素の一部にスタイルを適用 擬似要素 3
E::before E要素の内容の前にスタイルを適用 擬似要素 2
E::after E要素の内容の後にスタイルを適用 擬似要素 2
E.warning warningというクラス名を持つE要素にスタイルを適用 クラスセレクタ 1
E#myid myidというID名を持つE要素にスタイルを適用 IDセレクタ 1
E:not(s) sでないセレクタを持つE要素にスタイルを適用 否定擬似クラス 3
E F E要素と孫子関係にあるF要素にスタイルを適用 子孫セレクタ 1
E > F E要素と直接の子関係にあるF要素にスタイルを適用 子セレクタ 2
E + F E要素と弟関係にあるF要素にスタイルを適用 隣接セレクタ 2
E ~ F E要素が前にあるF要素にスタイルを適用 間接セレクタ 3

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です