セレクタ
セレクタ
CSS2.1までのセレクタ一覧とCSS3セレクタ一覧です。
各詳細ページでは、より具体的な説明とサンプルがあります。
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でないものに適用 |
