擬似クラスとは何ですか？
擬似クラスは、要素の特別な状態を定義するために使用されます。
例えば、それがために使用することができます。
- 要素のスタイルを設定するとき、それを介してユーザマウスを置い
- 異なるスタイル訪問し、未訪問のリンク
- それがフォーカスを取得したときに要素のスタイル
マウスオーバー・ミー
構文
擬似クラスの構文は次のとおりです。
selector:pseudo-class {
property:value;
}アンカー擬似クラス
リンクは、異なる方法で表示することができます。
例
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
»それを自分で試してみてください  | 注： a:hover後に来なければならないa:linkとa:visited ！効果的にするために、CSSの定義でa:activeした後に来なければならないa:hover効果的にするために、CSS定義に！擬似クラス名は大文字と小文字を区別しません。 |
|---|
擬似クラスとCSSクラス
擬似クラスは、CSSクラスと組み合わせることができます。
あなたは例のリンクの上に置くと、それは色が変わります。
上にカーソルを合わせる<div>
使用例:hoverに疑似クラスを<div>要素：
CSS - :first-child擬似クラス
:first-child擬似クラスは別の要素の最初の子である指定された要素にマッチします。
最初の一致<p>要素を
次の例では、セレクタは任意の一致した<p>任意の要素の最初の子である要素を：
最初の一致<i>すべての要素<p>要素を
次の例では、セレクタは、最初に一致した<i>すべての要素<p>の要素：
すべての一致<i>すべての最初の子要素<p>要素を
次の例では、セレクタはすべてに一致する<i>の要素<p>別の要素の最初の子である要素：
CSS - :lang擬似クラス
:lang擬似クラスを使用すると、異なる言語のための特別なルールを定義することができます。
以下の例では、 :langのために引用符を定義する<q>を持つ要素lang="no" ：
例
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
»それを自分で試してみてください 
その他の例
ハイパーリンクに異なるスタイルを追加します。
この例では、ハイパーリンクに他のスタイルを追加する方法を示します。
使用:focus
この例では、使用する方法を示し:focus擬似クラスを。
練習で自分自身をテスト！
すべてのCSS疑似クラス
| セレクタ | 例 | 例の説明 |
|---|---|---|
| :active | a:active | アクティブリンクを選択します |
| :checked | input:checked | すべてのチェックを選択し<input>要素を |
| :disabled | input:disabled | すべての無効を選択し<input>要素を |
| :empty | p:empty | すべての選択<p>子を持たない要素を |
| :enabled | input:enabled | すべての有効選択<input>要素を |
| :first-child | p:first-child | すべての選択<p>その親の最初の子である要素を |
| :first-of-type | p:first-of-type | すべての選択<p>最初のものである要素<p>親の要素を |
| :focus | input:focus | 選択<input>フォーカスを持つ要素を |
| :hover | a:hover | マウスオーバーのリンクを選択します |
| :in-range | input:in-range | 選択<input>指定した範囲内の値を持つ要素 |
| :invalid | input:invalid | すべての選択<input>無効な値を持つ要素を |
| :lang(language) | p:lang(it) | すべての選択<p> "it"で始まるlang属性値を持つ要素を |
| :last-child | p:last-child | すべての選択<p>その親の最後の子である要素を |
| :last-of-type | p:last-of-type | すべての選択<p>最後に要素<p>親の要素を |
| :link | a:link | すべての未訪問のリンクを選択します |
| :not(selector) | :not(p) | ではないすべての要素を選択し<p>要素を |
| :nth-child(n) | p:nth-child(2) | すべての選択<p>その親の第二子である要素を |
| :nth-last-child(n) | p:nth-last-child(2) | すべての選択<p>最後の子から数えて、その親の第二子である要素を |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | すべての選択<p>秒である要素<p>最後の子から数えて、その親の要素を |
| :nth-of-type(n) | p:nth-of-type(2) | すべての選択<p>秒である要素<p>親の要素を |
| :only-of-type | p:only-of-type | すべての選択<p>のみである要素<p>親の要素を |
| :only-child | p:only-child | すべての選択<p>その親の唯一の子である要素を |
| :optional | input:optional | 選択し<input>なしで要素を"required"属性 |
| :out-of-range | input:out-of-range | 選択<input>指定した範囲外の値を持つ要素 |
| :read-only | input:read-only | 選択<input>を持つ要素"readonly"属性が指定されました |
| :read-write | input:read-write | 選択し<input>なしで要素を"readonly"属性 |
| :required | input:required | 選択<input>を持つ要素"required"指定された属性 |
| :root | root | 文書のルート要素を選択します |
| :target | #news:target | （そのアンカー名を含むURLをクリックした）現在のアクティブ#news要素を選択します |
| :valid | input:valid | すべての選択<input>の有効な値を持つ要素を |
| :visited | a:visited | すべての訪問のリンクを選択します |
すべてのCSS擬似要素
| セレクタ | 例 | 例の説明 |
|---|---|---|
| ::after | p::after | すべての後にコンテンツを挿入します<p>要素 |
| ::before | p::before | すべての前にコンテンツを挿入します<p>要素 |
| ::first-letter | p::first-letter | すべてのの最初の文字を選択し<p>要素を |
| ::first-line | p::first-line | すべての最初の行を選択し<p>要素を |
| ::selection | p::selection | ユーザによって選択された要素の一部を選択します |