css 3偽類も偽元素も分かったか?

偽類とは何ですか.
擬似クラスは、要素の特殊な状態を定義するために使用されます.たとえば、次のように使用できます.

ユーザが要素上にマウスを置くときのスタイル

を設定する.

アクセスと非アクセスのリンクの異なるスタイル

フォーカス取得時の要素のスタイル

を設定する.
擬似クラスの構文
子孫セレクタは、指定した要素の子孫としてのすべての要素に一致します.次の例では、要素内のすべての要素を選択します.

   :   {       : ;   }

リンクは、次のように異なる方法で表示できます.

/*        */ 
a:link {   color: red; } 
/*         */ 
a:visited {   color: green; } 
/*           */ 
a:hover {   color: hotpink; } 
/*       */ 
a:active {   color: blue; }

注意:a:hoverはCSS定義a:link後とa:visited後に有効にする必要があります.a:activeはa:hoverがCSS定義後に有効になる必要があります!擬似クラス名は大文字と小文字を区別しません.
擬似クラスとCSSクラス
ダミークラスはCSSクラスと組み合わせて使用できます.サンプルのリンクにマウスを置くと、色が変更されます.

a.highlight:hover {   color: #ff0000; }

マウスを上にぶら下げる
:hoverが要素に擬似クラスを使用する例:

div:hover {   background-color: blue; }

簡単なツールチップサスペンション
要素にマウスを置いて要素を表示します(ツールチップなど)

p {   
display: none; 
background-color: yellow;  
padding: 20px; 
} 
div:hover p { 
display: block;
}

:first-child擬似クラス
:first-child擬似クラスで指定された要素は、別の要素の最初のサブマッチングです.次の例では、セレクタは任意の要素の最初のサブ要素要素と一致します.

p:first-child {   color: blue; }

すべての要素の最初の要素に一致

p i:first-child {   color: blue; }

最初のサブエレメントのすべてのエレメントに一致

p:first-child i {   color: blue; }

:lang擬似クラス
:lang擬似クラスでは、異なる言語の特殊なルールを定義できます.次の例では、langはlang=「no」を使用して要素の参照を定義します.

q:lang(no) {   quotes: "~" "~"; }

すべてのCSS擬似クラス
セレクタ
例
説明
:active
a:active
Activeアクティブリンクの選択
:checked
input:checked
選択した各要素を選択
:disabled
input:disabled
無効な要素を選択
:empty
p:empty
サブエレメントのない各エレメントを選択
:enabled
input:enabled
有効な各要素を選択
:first-child
p:first-child
親の最初のサブエレメントとして各エレメントを選択
:first-of-type
p:first-of-type
親要素の最初の要素である各要素を選択します.
:focus
input:focus
フォーカスのある要素の選択
:hover
a:hover
マウスの停止時のリンクの選択
:in-range
input:in-range
指定した範囲内の値を持つ要素の選択
:invalid
input:invalid
無効な値を持つすべての要素を選択
:lang(language)
p:lang(it)
「it」で始まるlang属性値を持つ各要素を選択
:last-child
p:last-child
親の最後のサブエレメントとして各エレメントを選択
:last-of-type
p:last-of-type
親要素の最後の要素である各要素を選択します.
:link
a:link
すべての未アクセスリンクを選択
:not(selector)
:not(p)
要素ではない各要素を選択
:nth-child(n)
p:nth-child(2)
親として2番目のサブエレメントを選択する各エレメント
:nth-last-child(n)
p:nth-last-child(2)
各要素を親要素の2番目のサブ要素として選択し、最後のサブ要素から計算を開始します.
:nth-last-of-type(n)
p:nth-last-of-type(2)
各要素を親要素の2番目の要素として選択し、最後のサブ要素から計算を開始します.
:nth-of-type(n)
p:nth-of-type(2)
親要素の2番目の要素である各要素を選択します.
:only-of-type
p:only-of-type
親要素の唯一の要素である各要素を選択します.
:only-child
p:only-child
親要素の唯一のサブ要素である各要素を選択します.
:optional
input:optional
「required」属性のない要素を選択
:out-of-range
input:out-of-range
指定した範囲外の値を持つ要素を選択します.
:read-only
input:read-only
指定したreadonly属性を持つ要素を選択
:read-write
input:read-write
「readonly」属性のない要素を選択
:required
input:required
「required」プロパティを指定した要素を選択します.
:root
root
ドキュメントのルート要素の選択
:target
#news:target
現在アクティブな#news要素を選択(アンカー名を含むURLをクリック)
:valid
input:valid
有効な値を持つすべての要素を選択
:visited
a:visited
アクセスしたすべてのリンクを選択
すべてのCSS擬似要素
セレクタ
例
説明
::after
p::after
要素ごとに挿入
::before
p::before
各要素の前に内容を挿入
::first-letter
p::first-letter
各要素の最初の文字を選択
::first-line
p::first-line
各要素の最初の行を選択
::selection
p::selection
ユーザーが選択した要素の選択