■セレクタの種類
スタイルを適用する対象を指定するセレクタ（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;} |
|---|
擬似クラス・擬似要素とは
疑似クラス（pseudo-classes）とは、
要素や属性などの文書構造だけでは特定できない“状況”を対象としてスタイルを適用するセレクタのことです。
例えば、ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。
また、擬似要素（pseudo-element）とは、
要素や属性などの文書構造だけでは特定できない“特定箇所”を対象としてスタイルを適用するセレクタのことです。
例えば、ブロックレベル要素の一行目や一文字目にスタイルを指定したり、要素の前後にテキストや画像などを挿入することが出来ます。
