擬似クラスとは？
状態:-
閲覧数:2,380
投稿日:2014-04-01
更新日:2015-09-16
Pseudo-classes
・要素が特定の状態にある場合にスタイルを指定するもの
・「要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができる擬似要素（Pseudo-elements）」とは異なる
・どちらもセレクタとなる要素名のあとにコロン（:）をつけて記述
・擬似要素を組み合わせて利用する際は、擬似要素の前に書く
CSS1
CSS2
CSS3
・要素が特定の状態にある場合にスタイルを指定するもの
・「要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができる擬似要素（Pseudo-elements）」とは異なる
・どちらもセレクタとなる要素名のあとにコロン（:）をつけて記述
・擬似要素を組み合わせて利用する際は、擬似要素の前に書く
CSS1
| 擬似クラス名 | 内容 | 擬似クラスが指し示す対象 |
|---|---|---|
| :link | 未訪問のリンク | a[href] 要素のみ |
| :visited | 訪問済みのリンク | a[href] 要素のみ |
| :active | 訪問済みのリンク | CSS2 では任意の要素 |
| 擬似クラス名 | 擬似クラスが指し示す対象 |
|---|---|
| :hover | カーソルが上に乗っており、且つアクティブでない要素 |
| :focus | テキスト入力にフォーカスされている要素 |
| :first-child | ある親要素の最初の子要素 |
| 擬似クラス名 | 擬似クラスが指し示す対象 |
|---|---|
| :last-child | ある親要素の最後の子要素 |
| :target | フラグメント識別子を持ってるurlリンクでターゲット対象にされた要素 |
| :enabled | ある要素が有効な時（フォームとか） |
| :disabled | ある要素が無効な時（フォームとか） |
| :checked | ラジオボタン、チェックボックスがチェックされた状態の時 |
| :indeterminate | ラジオボタン、チェックボックスがチェックされてるかどうか不確定の状態の時 |
| :root | ドキュメントルートの要素 |
| :nth-child(n) | 親要素のn番目の子要素 |
| :nth-last-child(n) | 親要素の最後から数えてn番目の子要素 |
| :nth-of-type(n) | 親要素の中で兄弟関係にある同じ種類の要素の中のn番目の要素 |
| :nth-last-of-type(n) | 親要素の中で兄弟関係にある同じ種類の要素の中最後から数えてn番目の要素 |
| :first-of-type | 親要素の中で兄弟関係にある同じ種類の要素の中の最初の要素 |
| :last-of-type | 親要素の中で兄弟関係にある同じ種類の要素の中の最後の要素 |
| :only-child | 兄弟を一つも持たない、その親の唯一の子である要素 |
| :only-of-type | 同じ要素の兄弟が一つもない要素 |
| :empty | 子要素を一つも持たない要素 |
| :contains() | テキストの内容が与えられた部分文字列を含む要素 |
| :not() | 「なになにではない（否定）場合」の要素 |
「:after擬似要素」は、Chromeの「要素を検証」で確認できない
CSS3擬似要素 (Pseudo-elements)ダブルコロン:: ／ CSS3擬似クラス (Pseudo-classes)シングルコロン: