CSS pseudo-class - 疑似クラスセレクター (詳細) - プログラミング世界へよこそ

疑似クラス(pseudo-class) は、W3C によって開発された一連のセレクターの特別な状態です。疑似クラスを通じて、ホバー (ホバー)、クリック (アクティブ)、および選択できないドキュメント内の要素などの要素の動的状態を設定できます。最初の子要素 (first-child) または最後の子要素 (last-child) などの他のセレクター (これらの要素は ID またはクラス属性なし) によって。

疑似クラス名は大文字と小文字を区別しませんが、コロン:で始める必要があります。さらに、疑似クラスは CSS のセレクターと組み合わせて使用する必要があり、構文は次のとおりです。

selector:pseudo-class {
property: value;
}

ここで、selector はセレクターの名前、pseudo-class は疑似クラスの名前です。

次の表に示すように、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> と一致します。<p> は親要素の最初の子要素である必要があります
:first-of-type	p:first-of-type	親要素の最初の <p> 要素と一致します。
:focus	input:focus	フォーカスされた <input> 要素に一致します
:hover	a:hover	マウスがホバリングしている要素に一致します
:in-range	input:in-range	<input> 要素を指定された値の範囲と一致させます。
:invalid	input:invalid	無効な値を持つすべての <input> 要素に一致
:lang(language)	p:lang(it)	lang 属性値が「it」で始まるすべての <p> 要素と一致します。
:last-child	p:last-child	親要素の最後の子要素 <p> と一致します。<p> は親要素の最後の子要素である必要があります
:last-of-type	p:last-of-type	親要素の最後の <p> 要素と一致します。
:link	a:link	未訪問のすべてのリンクに一致
:not(selector)	:not(p)	<p> 要素以外のすべての要素に一致
:nth-child(n)	p:nth-child(2)	親要素内の 2 番目の子要素 <p> と一致します。
:nth-last-child(n)	p:nth-last-child(2)	親要素 <p> の最後から 2 番目の子と一致します。
:nth-last-of-type(n)	p:nth-last-of-type(2)	親要素 <p> の最後から 2 番目の子と一致します。
:nth-of-type(n)	p:nth-of-type(2)	親要素 <p> の 2 番目の子要素と一致します。
:only-of-type	p:only-of-type	親要素内の唯一の <p> 要素と一致します
:only-child	p:only-child	親要素内の唯一の子要素 <p> と一致します。
:optional	input:optional	「required」属性のない <input> 要素と一致します。
:out-of-range	input:out-of-range	<input> 要素を指定された範囲外の値と照合します
:read-only	input:read-only	「readonly」属性を指定する <input> 要素と一致します。
:read-write	input:read-write	「readonly」属性のない <input> 要素と一致します。
:required	input:required	「required」属性を指定する <input> 要素と一致します。
:root	root	一致する要素のルート要素。HTML では、ルート要素は常に HTML です。
:target	#news:target	現在アクティブな #news 要素と一致します (そのアンカー名を含む URL をクリックします)。
:valid	input:valid	有効な値を持つすべての <input> 要素に一致します
:visited	a:visited	訪問したすべてのリンクに一致

:link、:visited、:active、および :hover 疑似クラスの使用については、以前に ” Link ” を紹介したときに簡単に紹介したので、ここでは繰り返しません. 次に、より一般的に使用される疑似クラスをいくつか紹介します. -クラス。

コンテンツ 非表示

1. 1. first-child

2. 2.last-child

3. 3. nth-child

4. 「CSS 疑似クラスセレクター (詳細)」についてわかりやすく解説！絶対に観るべきベスト2動画

1. first-child

擬似クラスの first-child は、指定された親要素の下の最初の子要素と一致できます。たとえば、 ul li:first-child <li>要素の下の最初の<ul>要素と一致できます。サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:first-child {     /*マッチ<ul>の最初の<li>タグ*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS位置</li>
        <li>CSS要素のスタッキング</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

実行結果は次の図のとおりです。

2.last-child

first-child と同様に、疑似クラス last-child は、指定された親要素の下の最後の子要素と一致できます.たとえばul li:last-child <ul>要素の下の最後の<li>要素と一致できます.サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:last-child {      /*<ul>タグ内の最後の<li>タグにマッチ*/
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS位置設定</li>
        <li>CSS要素のスタッキング</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

実行結果は次の図のとおりです。

図: css last-childの例 — 図: css pseudo-class last-childの例

3. nth-child

疑似クラス nth-child は CSS3 で新しく追加されたもので、指定された要素の下の n 番目の子要素に一致できます。たとえば、 ul li:nth-child(2) <ul>要素要素の下の 2 番目の<li>に一致できます。、サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        ul li:nth-child(2) {    /* <ul>タグの2番目の<li>タグにマッチする */
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>CSS配置</li>
        <li>CSS要素スタック</li>
        <li>CSSフロート</li>
    </ul>
</body>
</html>

実行結果は次の図のとおりです。