1. Home
  2. CSSの擬似クラス

CSSの擬似クラス2024 年の最新の入門チュートリアル。このコースでは 文法,アンカー擬似クラス,例,擬似クラスとCSSクラス,CSS - ：最初の - child擬似クラス,最初の<p>要素にマッチ,例,最初の<私>要素内のすべての<P>要素にマッチ,例,例,CSS - ：langの擬似クラス,例,より多くの例,すべてのCSS擬似クラス/要素, について学習できます。

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;} /* 已选中的链接 */

»をお試しください

注：CSS定義を、：ホバーを入れなければなりません：リンクと：の後に訪れた、効果的です。

注：CSS定義、アクティブがに置かれている必要があります有効であることが、後のホバー。

注：擬似クラスの名前は大文字と小文字を区別しません。

擬似クラスとCSSクラス

擬似クラスは、CSSクラスと組み合わせて使用​​することができます。

a.red:visited {色：＃FF0000の;}

<a class="red" href="css-syntax"> 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>

»をお試しください

最初の<私>要素内のすべての<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>

»をお試しください
：すべての<私>要素内の<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>

»をお試しください

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>

»をお試しください

例

より多くの例

ハイパーリンクに異なるスタイルを追加します。
この例では、ハイパーリンクに他のスタイルを追加する方法を示します。

用途：フォーカス
フォーカス擬似クラス：この例では、使用する方法を示します。

すべての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>要素

ホットチュートリアル

お問い合わせ

CSSの擬似クラス
10/30