CSS セレクタ
CSS で主に使用されるセレクタの一覧です
CSS 1 ～ 2.1 セレクタ + CSS 3 セレクタ
| セレクタ名称・分類 | 記述 | 解説 |
|---|---|---|
| 全称セレクタ （ユニバーサルセレクタ） |
* | すべての要素に適用。 |
| 要素セレクタ （タイプセレクタ） |
A | 要素名のみをセレクタとするもの。 指定されたタグすべてに適用。 （例えば p タグならその HTML 文書内すべての p タグでマークアップされた内容に対して適用される） |
| IDセレクタ | #id | idが指定された要素に適用。 #（シャープ）に続く任意の名称をセレクタとするもの。 ひとつのHTML文書内でひとつの要素にのみ指定することが可能。 |
| クラスセレクタ | .class | classが指定された要素に適用。 .（ピリオド）に続く任意の名称をセレクタとするもの。 ひとつのHTML文書内で複数の要素に指定することが可能。 p.class名 とした場合は p タグかつ class が指定されている要素すべてに適用 .class名 とした場合はタグは問わずそのクラス名が指定されているすべての要素に適用 |
| 属性セレクタ | A[属性] | A要素の属性が指定されているすべての要素に適用。 |
| A[属性＝”値”] | A要素の属性と値が一致するすべての要素に適用。 | |
| A[属性~=”値”] | A要素の属性の値が空白で区切られ複数指定されている場合、指定した値と一致する値があれば適用。 | |
| A[属性|=”値”] | A要素の属性の値が-（ハイフン）で区切られ複数指定されている場合、指定した値の文字列で始まる値が含まれる要素に適用。 | |
| A[属性^=”値”] | 属性の値が指定した値の文字列から始まっている場合に適用。 | |
| A[属性$=”値”] | 属性の値が指定した値の文字列で終わる場合に適用。 | |
| A[属性*=”値”] | 属性の値が指定した値の文字列を含む場合に適用。 | |
| 子孫セレクタ | A B | Aタグ内に内包されるBタグすべてに適用 |
| 子セレクタ | A > B | A要素直下のすべてのB要素に適用 |
| 隣接セレクタ | A + B | A要素直後のB要素に適用 |
| 疑似クラス | a:link | 未訪問リンクに適用 |
| a:visited | 訪問済みのリンクに適用 | |
| A:hover | マウスカーソルが重なっている時に適用 | |
| A:active | アクティブ化した時に適用 | |
| A:focus | フォーカスがある時に適用 (フォームの入力等) |
|
| A:target | 移動先のターゲットに適用 | |
| A:lang() | lang属性が指定された要素に適用 | |
| A:enabled | 有効な要素に適用 | |
| A:disabled | 無効な要素に適用 | |
| A:checked | ラジオボタンやチェックボックスが選択された時に適用 | |
| A:indeterminate | ラジオボタンやチェックボックスが不確定時に適用 | |
| A:root | ルート要素に適用 | |
| A:first-child | 最初の子要素に適用 | |
| A:last-child | 最後の子要素に適用 | |
| A:nth-child(X) | 連続する兄弟要素のX番目がA要素なら適用 | |
| A:nth-child(Xn) | 連続する兄弟要素のXの倍数行がA要素なら適用 2n＝偶数行 2n+1＝奇数行 |
|
| A:nth-of-type(X) | 連続する兄弟要素のうち、A要素のX番目に適用 | |
| 疑似要素 （CSS3 からは疑似クラスと区別するため“:”ではなく“::”を付けることになりました） |
A::before { content: “B”; } | Aの直前に追加される要素Bに適用 |
| A::after { content: “B”; } | Aの直後に追加される要素Bに適用 | |
| A::first-line | A要素の最初の一行に適用 | |
| A::first-letter | A要素の最初の一文字に適用 |