HTML5:CSS1からCSS3までの擬似クラス一覧

CSS3までの擬似クラスの一覧リストを作成しました。
HTML5/CSS3であればjQueryを使わなくても、ちょっとしたデザインやレイアウトなら実現できることが分かります。

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で共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents