CSS3 Pseudo-classes / 擬似クラス

CSS3 Pseudo-classes / 擬似クラス

　CSS1/CSS2からの継承含めCSS3で定義されている擬似クラス(Pseudo-classes)の概要は以下の通りです。

パターン	初期 ver	意味	W3C参照URI
動的な擬似クラス(リンク擬似クラス／ユーザーアクション擬似クラス)
E:link E:visited	CSS1	リンク先を訪問していない／ターゲットがまだ訪問されていない(:link) または、既に訪問済み(:visited)のハイパーリンクのソースアンカーがある E 要素	The link pseudo-classes
E:active	CSS1	ユーザーアクションがある間における E 要素	The user actionpseudo-classes
E:hover E:focus	CSS2
ターゲット擬似クラス
E:target	CSS3	参照するURIのターゲットがある E 要素	The target pseudo-class
言語擬似クラス
E:lang(fr)	CSS2	(当該文書の言語が、言語がどのように決定されるかを記述する)言語"fr"にある E という種類の要素	The :lang() pseudo-class
UI要素状態擬似クラス
E:enabled E:disabled	CSS3	enabled / disabledであるユーザーインタフェースの要素 E	The UI element statespseudo-classes
E:checked E:indeterminate	CSS3	チェック済み／不定の状態にあるユーザーインタフェースの要素 E (ラジオボタンやチェックボックス等)	The UI element statespseudo-classes
構造的な擬似クラス
E:root	CSS3	文書のルートである E 要素	Structuralpseudo-classes
E:nth-child(n)	CSS3	その親のn番めの子である E 要素	Structuralpseudo-classes
E:nth-last-child(n)	CSS3	後ろから数えてその親のn番めの子である E 要素	Structuralpseudo-classes
E:nth-of-type(n)	CSS3	その型を持つ並列(きょうだい)関係にあるn番めの E 要素	Structuralpseudo-classes
E:nth-last-of-type(n)	CSS3	後ろから数えてその型を持つ並列(きょうだい)関係にあるn番めの E 要素	Structuralpseudo-classes
E:first-child	CSS2	その親要素の最初の子要素である E 要素	Structuralpseudo-classes
E:last-child	CSS3	その親要素の最後の子要素である E 要素	Structuralpseudo-classes
E:first-of-type	CSS3	その型を持つ並列(きょうだい)関係にある最初の E 要素	Structuralpseudo-classes
E:last-of-type	CSS3	その型を持つ並列(きょうだい)関係にある最後の E 要素	Structuralpseudo-classes
E:only-child	CSS3	その親要素の唯一の子要素である E 要素	Structuralpseudo-classes
E:only-of-type	CSS3	その型を持つ並列(きょうだい)関係にある唯一の(他に並列関係の要素がない) E 要素	Structuralpseudo-classes
E:empty	CSS3	(テキストノードを含む)子要素がない E 要素	Structuralpseudo-classes
ブランク
(:: selection)	-	-	-
否定擬似クラス
E:not(s)	CSS3	単純なセレクタとマッチしない E 要素	Negation pseudo-class

　このようにCSS3ではCSS1の擬似クラス3つ、CSS2の擬似クラス4つに加え、:target/:enabled/:disabled/:checked/:root/:nth-child()/:nth-last-child()/:nth-of-type()/:nth-last-of-type()/:first-child/:last-child/first-of-type/last-of-type/only-child/only-of-type/empty/not()の18種が新たに定義され、計25種の擬似クラスが定義されています。

CSS擬似クラスとは : CSS1擬似クラス > CSS2擬似クラス > CSS3擬似クラス

より関連性の高いスタイル設定

CSS擬似要素 / CSSセレクタ

CSS/スタイルシート情報

関連リンク

• メインメニュー
• ホームページ作成メニュー
• ウェブ開発メニュー