⇒ その１ 基本セレクタ
⇒ その２ グループ化 / 結合子
⇒ その３ 疑似クラス / 疑似要素（今回）
疑似クラスと疑似要素の違いは以下の通りです。
疑似クラス ⇒ 「:link」のようにコロン1つ
要素が特定の状態である場合にスタイルを適用させる
a:link { スタイルプロパティ }
/* リンク先が未訪問の <a> 要素のスタイルを指定 */
疑似要素 ⇒ 「::first-line」のようにコロン2つ
要素の一部に対してスタイルを適用させる
p::first-line { スタイルプロパティ }
/* <p> 要素の1行目のスタイルを指定 */
以下、疑似クラスの機能ごと、及び疑似要素を表にまとめましたが、基本的に CSS レベル 1 ～ 3 のみです。
（:read-only と :read-write はレベル 4 ですが、IE 以外のメジャーの最新のブラウザで実装されているので含めました。）
疑似クラス
リンク関連
| 構文 | 説明 |
|---|---|
| :link | リンク先が未訪問。<a>, <area>, <link>など、href 属性を持つ要素を選択。 |
| :visited | リンク先が訪問済。<a>, <area>, <link>など、href 属性を持つ要素を選択。 |
| :hover | カーソルをその要素の上に置いているが、まだクリックにしていない状態。 「:link」「:visited」の後、「:active」の前に記述。 |
| :active | クリック中。<a> 及び <bottun> で使われる。 「:link」「:visited」「:hover」の後に記述。 |
| :target | #のついたリンクをクリックしたとき、対応するid値を持つ要素に適用。 |
兄弟要素の位置関連
| 構文 | 説明 |
|---|---|
| :nth-child(n) :nth-child(An + B) |
兄弟グループの中で n 番目の要素を選択。順番を数える際、指定以外の要素も含めてカウント。 例）:nth-child(4) ⇒ 4番目 :nth-child(4n) ⇒ 3つ置き :nth-child(2n+1) ⇒ 奇数 :nth-child(2n) ⇒ 偶数 :nth-child(odd) ⇒ 奇数 :nth-child(even) ⇒ 偶数 |
| :nth-last-child(n) :nth-last-child(An + B) |
兄弟グループの中で後ろから n 番目の要素を選択。（順番を数える際、指定以外の要素も含めてカウント。） 例）引数の取り方は、:nth-child と同じ。 |
| :nth-of-type(n) :nth-of-type(An + B) |
兄弟グループの中で n 番目の要素を選択。（順番を数える際、指定した要素のみカウント。） 例）引数の取り方は、:nth-child と同じ。 |
| :nth-last-of-child | 兄弟グループの中で後ろから n 番目の要素を選択。（順番を数える際、指定した要素のみカウント。） 例）引数の取り方は、:nth-child と同じ。 |
| :first-child | 兄弟グループの中で最初の要素。（指定以外の要素も含めてカウント。） |
| :last-child | 兄弟グループの中で最後の要素。（指定以外の要素も含めてカウント。） |
| :first-of-type | 兄弟要素のグループの中でその種類の最初の要素。（指定以外の要素を含めない。） |
| :last-of-type | 兄弟要素のグループの中でその種類の最後の要素。（指定以外の要素を含めない。） |
| :only-child | 兄弟要素がない要素。 |
| :only-of-type | 同じ型の兄弟要素がない要素 |
フォーム関連
| 構文 | 説明 |
|---|---|
| :enabled | 有効な要素。 |
| :disabled | 無効な要素。<input> で「disabled=”disabled”」が選択されているなど。 |
| :checked | チェックされている状態。<input type=”radio”>, <input type=”checkbox”>, <option> で利用。 |
| :indeterminate | チェックが不確定な状態。<input type=”radio”> でフォーム内の同じ name のラジオボタンが未選択な場合など。 |
| :default | 初期値の指定がある要素。<button>, <input type=”radio”>, <input type=”checkbox”>, <option> で利用。 |
| :required | required 属性の指定がある要素。<input>, <select>, <textarea> で利用。 |
| :optional | required 属性の指定がない要素。<input>, <select>, <textarea> で利用。 |
| :valid | 内容の検証に成功した要素。<input> やその他の <form> で利用。 |
| :invalid | 内容の検証に失敗した要素。<input> やその他の <form> で利用。 |
| :in-range | 入力値が min および max 属性による制限範囲内にある状態。<input> で利用。 |
| :out-of-range | 入力値が min および max 属性による制限範囲外にある状態。<input> で利用。 |
| :read-only | ユーザが編集できない要素。<input> で「readonly」属性が指定されている場合。Firefox では要プレフィックス。 |
| :read-write | ユーザが編集できる要素。Firefox では要プレフィックス。 |
| :forcus | フォーカスを持つ要素が選択されている状態。フォームなどで利用。 |
| :forcus-within | フォーカスを持つ要素が選択されている時、フォーカスを含む要素を選択。フォームなどで利用。 |
その他
| 構文 | 説明 |
|---|---|
| :root | ルート要素を選択。 HTML では、:root は <html> 。 |
| :empty | 空の要素。（コメントや処理指示は空として扱われる。改行、インデント、スペースなどは空として扱われない。） |
| :lang() | 定義された言語を持つ要素。例）p:lang(ja) ⇒ 日本語が選択された <p>。 |
| :not() | 選択されたセレクタに一致しない要素。例）p:not(.demo) ⇒ class=”demo” が指定されていない <p>。 |
| :fullscreen | 全画面表示の状態。 |
疑似要素
| 構文 | 説明 |
|---|---|
| ::first-line | ブロックレベル要素の最初の行に適用。 |
| ::first-letter | ブロックレベル要素の最初の文字に適用。（最初の文字より前に画像などの他のコンテンツがない場合。） |
| ::before | 選択した要素の最初の子要素としてコンテンツを作成。（その要素の直前に表示される。） |
| ::after | 選択した要素の最後の子要素としてコンテンツを作成。（その要素の直後に表示される。） |
| ::placeholder | <input> または <textarea> のプレイスホルダー文字列に適用。 |
| ::selection | 選択された文字列、画像などに適用。 |