CSSの擬似クラス
CSS擬似クラスセレクタは、いくつかの特殊効果を追加するために使用されています。
文法
擬似クラスの構文：
selector:pseudo-class {property:value;}
CSSクラスも擬似クラスを使用することができます。
selector.class:pseudo-class {property:value;}
アンカー擬似クラス
ブラウザでのCSSサポートは、リンクの異なる状態は、異なる方法で表示することができます
例
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
»をお試しください
注：CSS定義を、：ホバーを入れなければなりません：リンクと：の後に訪れた、効果的です。
注：CSS定義、アクティブがに置かれている必要があります有効であることが、後のホバー。
注：擬似クラスの名前は大文字と小文字を区別しません。
擬似クラスとCSSクラス
擬似クラスは、CSSクラスと組み合わせて使用することができます。
a.red:visited {色：＃FF0000の;}
<a class="red" href="css-syntax.html"> CSSの構文します</a>
<a class="red" href="css-syntax.html"> CSSの構文します</a>
例えば、上記のリンクが訪問されている場合は、赤色で表示されます。
CSS - ：最初の - child擬似クラス
first-child擬似クラス最初の子要素を選択します：あなたが使用することができます
注：IE8の以前のバージョンで宣言する必要があります<DOCTYPE！> 、このように：最初の子を有効にします。
最初の<p>要素にマッチ
次の例では、セレクタは、任意の要素要素の最初の子として、<p>要素に一致します。
例
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
»をお試しください
最初の<私>要素内のすべての<P>要素にマッチ
次の例の最初の<私>要素、セレクタは任意の<p>要素に一致します。
例
<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
»をお試しください
：すべての<私>要素内の<p>要素の最初の子要素として<H2試合すべて
例
<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
»をお試しください
CSS - ：langの擬似クラス
：ラング擬似クラスを使用すると、異なる言語が特別なルールを定義するための能力を持つことができます
注：IE8は宣言する必要があり、<DOCTYPEを！>サポートするために; langの疑似クラス。
qの次の例,: LANGクラスのtype属性の値ではありません要素の定義の引用：
例
<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>
<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>
»をお試しください
より多くの例
ハイパーリンクに異なるスタイルを追加します。
この例では、ハイパーリンクに他のスタイルを追加する方法を示します。
用途：フォーカス
フォーカス擬似クラス：この例では、使用する方法を示します。
すべてのCSS擬似クラス/要素
| セレクタ | 例 | 例ショー |
|---|---|---|
| ：チェックし | input:checked | 選択したすべてのフォーム要素 |
| ：無効 | input:disabled | すべての無効フォーム要素を選択します |
| ：空 | p:empty | 選択すべてのp要素は、子を持ちません |
| ：有効 | input:enabled | すべての有効なフォーム要素を選択します |
| ：第一型の | p:first-of-type | 各親要素を選択すると、最初の子要素のp p要素であります |
| ：インレンジ | input:in-range | 指定された範囲内の要素の値を選択します |
| ：無効 | input:invalid | すべての無効な要素を選択します |
| ：最後の子 | p:last-child | 最後の子要素内のすべてのp要素を選択します |
| ：最後の型 | p:last-of-type | 各p要素が親要素pの最後の要素である選択 |
| ：ない（セレクタ） | :not(p) | P以外のすべての要素を選択します |
| ：n番目の子（n）は、 | p:nth-child(2) | 第2のサブ要素内のすべてのp要素を選択します |
| ：n番目の-最後の子（N ） | p:nth-last-child(2) | P 2番目の子要素の逆数のすべての要素を選択します |
| ：n番目の-最後の型 （n）は、 | p:nth-last-of-type(2) | 彼らはすべての要素p pは第2のサブ要素の逆数である選択します |
| ：n番目の型（N ） | p:nth-of-type(2) | p個のp個の子要素に第二のすべての要素を選択します |
| ：専用の型 | p:only-of-type | p要素のすべてが子要素を選択します |
| ：のみ、子 | p:only-child | p要素のすべてが子要素を選択します |
| ：オプション | input:optional | 要素のない「必要」属性を選択します。 |
| ：範囲外の | input:out-of-range | 指定した値の範囲外の属性要素を選択 |
| ：読み取り専用 | input:read-only | 要素の属性の読み取り専用属性を選択します |
| ：読み書き | input:read-write | 要素のプロパティの読み取り専用しないことを選択した属性 |
| ：必要 | input:required | 選択属性は、要素のプロパティを指定する "必要" |
| ：ルート | root | 文書のルート要素を選択します |
| ：ターゲット | #news:target | 現在の活動#news要素を選択します（アンカーの名前が含まれているURLをクリックしてください） |
| ：有効 | input:valid | プロパティのすべての有効な値を選択します |
| ：リンク | a:link | すべての未訪問のリンクを選択します |
| ：訪問 | a:visited | すべての訪問のリンクを選択します |
| ：アクティブ | a:active | 選択は、アクティブリンクであります |
| ：ホバー | a:hover | リンクステータスにマウスを置きます |
| ：フォーカス | input:focus | 入力要素を選択した後、フォーカスを持っています |
| ：最初の文字 | p:first-letter | 各<p>要素の最初の文字を選択 |
| ：ファーストライン | p:first-line | 各<p>要素の最初の行を選択します |
| ：最初の子 | p:first-child | <] P>要素セレクタは、最初の子要素に属する任意の要素にマッチ |
| ：前 | p:before | 各<p>要素の前にコンテンツを挿入します |
| ：後 | p:after | 各<p>要素の後にコンテンツを挿入します |
| ：LANG（言語） | p:lang(it) | 開始値にLANG属性選択<p>要素 |