CSS2 セレクタ 一覧

セレクタ名パターン簡単な説明
ユニバーサルセレクタ*全ての要素に適用
タイプセレクタEE要素に適用
子孫セレクタE FE要素の子孫にあたるF要素に適用
クラスセレクタE.warningwarningというクラス名のE要素に適用
IDセレクタE#myidmyidというID名のE要素に適用
子セレクタE > FE要素の子にあたるF要素に適用
隣接セレクタE + FE要素の直後にある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-lineEという要素の最初の一行のみに適用
:first-letter疑似要素E:first-letterEという要素の最初の一文字のみに適用
:before疑似要素E:beforeEという要素の前に生成される内容に適用
:after疑似要素 E:afterEという要素の後に生成される内容に適用

CSS3 セレクタ 一覧

セレクタ名パターン簡単な説明
間接セレクタE ~ FEという要素の後に出現する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:emptyEという要素内が空の場合に適用
ターゲット擬似クラスE:targetアンカーリンクで飛んだ先のE要素に適用
UI要素状態擬似クラスE:enabled
E:disabled		有効または無効にされているUI要素のE要素に適用
UI要素状態擬似クラスE:checkedチェックの有無の状態によるE要素に適用
否定擬似クラスE:not(s)Eという要素のうち、sでないものに適用