スタイルを適用する対象を指定するセレクタ（selector）には以下のものがあります。
ブラウザの種類やバージョンによって対応していない場合があるので注意してください。
| 名前 | セレクタの書式 | スタイルを適用する対象 | 使用例 |
|---|---|---|---|
| 要素型セレクタ | 要素名 | 要素名で指定した要素 | p {color:blue;} |
| 全称セレクタ | * | すべての要素 | * {color:blue;} |
| classセレクタ | 要素名.クラス名 | クラス名を付けた要素 | p.sample {color:blue;} |
| idセレクタ | 要素名#id名 | id名を付けた要素 | div#sample {color:blue;} |
| 擬似クラス | 要素名:link | 未訪問のリンク | a:link {color:blue;} |
| 要素名:visited | 訪問済のリンク | a:visited {color:blue;} | |
| 要素名:hover | カーソルが乗っている要素 | a:hover {color:blue;} | |
| 要素名:active | クリック中の要素 | a:active {color:blue;} | |
| 要素名:focus | フォーカスされている要素 | input:focus {background:blue;} | |
| 要素名:lang | 特定の言語を指定した要素 | p:lang(en) {color:blue;} | |
| 要素名:first-child | 要素内の最初の子要素 | p:first-child {color:blue;} | |
| 擬似要素 | 要素名:first-line | 要素の最初の一行 | p:first-line {color:blue;} |
| 要素名:first-letter | 要素の最初の一文字 | p:first-letter {color:blue;} | |
| 要素名:before | 要素の直前 | blockquote:before {content:”『”;} | |
| 要素名:after | 要素の直後 | blockquote:after {content:”』”;} | |
| 属性セレクタ | 要素名[属性名] | 特定の属性を持つ指定要素 | a[target] {color:blue;} |
| 要素名[属性名= “属性値”] | 特定の属性値を持つ指定要素 | a[target=”_blank”] {color:blue;} | |
| 要素名[属性名~= “属性値”] | 属性値候補と一致した要素 | p[class~=”sample”] {color:blue;} | |
| 複数のセレクタ | セレクタ,セレクタ | 複数のセレクタ | h1, h2 {color:blue;} |
| 子孫セレクタ | セレクタ セレクタ | 下の階層の子孫要素 | p strong {color:blue;} |
| 子セレクタ | セレクタ>セレクタ | 直下の階層の子要素 | p > strong {color:blue;} |
| 隣接セレクタ | セレクタ+セレクタ | 直後に隣接している要素 | h1 + p {color:blue;} |
上記はCSS2までのセレクタ一覧です。
CSS3では、新しいセレクタが追加されているので、
参考にしてください。
CSS3より擬似要素に付けるコロン（ : ）が２つになって、疑似クラスとの違いが分かりやすくなっています。
ただし、コロン２つの記述方法は、IE8以前ではサポートされていないので、
これらの旧いブラウザを考慮するなら、疑似要素についてもコロン１つにしておいたほうが良いでしょう。
疑似クラス（pseudo-classes）とは、
要素や属性などの文書構造だけでは特定できない
“ある状況にある要素”を対象としてスタイルを適用するセレクタのことです。
例えば、最初の子要素やユーザーが操作中の要素などを対象にスタイルを適用することが可能になります。
ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。
一方、擬似要素（pseudo-element）とは、
要素や属性などの文書構造だけでは特定できない
“要素の一部”を対象としてスタイルを適用するセレクタのことです。
例えば、要素の一行目や一文字目にスタイルを指定したり、
要素の前後にテキストや画像などを挿入することが出来ます。
擬似クラスと擬似要素の違いが分かりにくいですが、
疑似クラスは要素全体が対象になるのに対して、
疑似要素は要素の一部分だけが対象になる点が異なります。
| <前へ | 記事一覧へ | 次へ> |
