CSS3までの擬似クラスの一覧リストを作成しました。
HTML5/CSS3であればjQueryを使わなくても、ちょっとしたデザインやレイアウトなら実現できることが分かります。
INDEX
CSS1からCSS3までの擬似クラス一覧
CSS1
| 擬似クラス | ターゲット |
|---|---|
| :link | 未訪問のリンク |
| :visited | 訪問済みのリンク |
| :active | 訪問済みのリンク |
CSS2
| 擬似クラス | ターゲット |
|---|---|
| :hover | カーソルが上に乗り、アクティブでない要素 |
| :focus | テキスト入力にフォーカスされている要素 |
| :first-child | ある親要素の最初の子要素 |
CSS3
| 擬似クラス | ターゲット |
|---|---|
| :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() | 否定の要素 |
まとめ
一覧にしてみて面白かったことは、first-child は CSS2 で登場しているのに、last-child は CSS3 から採用されているということです。W3Cの標準策定も大変であることが伺えますね。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
