CSS2 セレクタ 一覧

セレクタ名 パターン 簡単な説明
ユニバーサルセレクタ * 全ての要素に適用
タイプセレクタ E E要素に適用
子孫セレクタ E F E要素の子孫にあたるF要素に適用
クラスセレクタ E.warning warningというクラス名のE要素に適用
IDセレクタ E#myid myidというID名のE要素に適用
子セレクタ E > F E要素の子にあたるF要素に適用
隣接セレクタ E + F E要素の直後にあるF要素に適用
属性セレクタ E[foo] fooという属性が設定されたE要素に適用
属性セレクタ E[foo="bar"] fooの属性値がbarと完全一致するE要素に適用
属性セレクタ E[foo~="bar"] fooの属性値が空白区切りで複数あり、その中の一つでもbarという値が含まれている場合のE要素に適用
属性セレクタ E[hreflang|="en"] (href)lang属性がハイフン区切りの前方一致でenの値のE要素に適用
リンク擬似クラス E:link
E:visited		 :linkが未訪問のE要素に適用、:visitedが訪問済みのE要素に適用
ダイナミック擬似クラス E:active
E:hover
E:focus		 ユーザーが特定のアクションをしている時のE要素に適用
言語擬似クラス E:lang(fr) frという言語のE要素に適用
:first-child疑似クラス E:first-child ある要素内の最初のE要素に適用
:first-line疑似要素 E:first-line Eという要素の最初の一行のみに適用
:first-letter疑似要素 E:first-letter Eという要素の最初の一文字のみに適用
:before疑似要素 E:before Eという要素の前に生成される内容に適用
:after疑似要素 E:after Eという要素の後に生成される内容に適用

CSS3 セレクタ 一覧

セレクタ名 パターン 簡単な説明
間接セレクタ E ~ F Eという要素の後に出現するFという要素に適用
属性セレクタ E[foo^="bar"] fooの属性値がbarと前方一致するE要素に適用
属性セレクタ E[foo$="bar"] fooの属性値がbarと後方一致するE要素に適用
属性セレクタ E[foo*="bar"] fooの属性値がbarと部分一致するE要素に適用
:root疑似クラス E:root 文書のルートに適用
:last-child疑似クラス E:last-child ある要素内の最後のE要素に適用
:nth-child()疑似クラス E:nth-child(n) ある要素内の隣接しているE要素を最初から数え、n番目のE要素に適用
:nth-last-child()疑似クラス E:nth-last-child(n) ある要素内の隣接しているE要素を最後から数え、n番目のE要素に適用
:first-of-type疑似クラス E:first-of-type 兄弟関係にあたるE要素の最初のE要素に適用
:last-of-type疑似クラス E:last-of-type 兄弟関係にあたるE要素の最後のE要素に適用
:nth-of-type()疑似クラス E:nth-of-type(n) 兄弟関係のE要素を最初から数え、n番目のE要素に適用
:nth-last-of-type()疑似クラス E:nth-last-of-type(n) 兄弟関係のE要素を最後から数え、n番目のE要素に適用
:only-child疑似クラス E:only-child ある要素内で子要素がE要素のみの場合に適用
:only-of-type疑似クラス E:only-of-type ある要素内で唯一のE要素に適用
:empty疑似クラス E:empty Eという要素内が空の場合に適用
ターゲット擬似クラス E:target アンカーリンクで飛んだ先のE要素に適用
UI要素状態擬似クラス E:enabled
E:disabled		 有効または無効にされているUI要素のE要素に適用
UI要素状態擬似クラス E:checked チェックの有無の状態によるE要素に適用
否定擬似クラス E:not(s) Eという要素のうち、sでないものに適用