擬似クラス系セレクタ
擬似クラス (pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
記述としては要素の後に：（コロン）を二つ付けて指定します。CSS2まではコロンは一つでしたが、後述する擬似クラスと識別するため、CSS3からコロンを二つ記述するようになりました。
- link 擬似クラス（未訪問リンクスタイル）
- visited 擬似クラス（訪問済リンクスタイル）
- hover 擬似クラス（オンカーソルスタイル）
- active 擬似クラス（アクティブスタイル）
- first-child/last-child 擬似クラス（先頭・最終の子要素指定）
- nth-child 擬似クラス（n 番目の子要素指定）
An+B の表記を用いて、兄弟要素のリストから要素を選択します。 - nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
- not 擬似クラス（指定値以外の要素指定）
擬似要素系セレクタ
- first-letter 擬似要素（要素の 1 文字目を指定）色変えたり
- first-line 擬似要素（要素の 1 行目を指定）一行目だけ色変えたり
- before/after 擬似要素（要素の直前・直後にコンテンツの挿入）画像を最後に入れたりできる
例えば最初の一文字だけを色付ける場合
HTML
<p class=”example”>
テキストテキスト<br>テキストテキスト</p>
CSS
p.example::first-letter {
color: #ff0000;
}
みたいな感じ…
