↩ プログラミング言語 Web関連 css3 CSS pseudo-class – 疑似クラスセレクター (詳細)

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. 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>

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

図: css first-child sample
図: css first-child sample

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. n番目の子

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>

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

図: css pseudo-class nth-childの例 
図: css pseudo-class nth-childの例
 

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

【CSS #3】基礎からちゃんと学ぶ CSS 入門！この講座だけでセレクターは完結できます！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
https://www.youtube-nocookie.com/watch?v=3RX0ASjozkc&pp=ygUxQ1NTIOeWkeS8vOOCr-ODqeOCueOCu-ODrOOCr-OCv-ODvCAo6Kmz57SwKSZobD1KQQ%3D%3D
1-1 構造的な擬似要素の応用（CSSの高度なセレクタ）
https://www.youtube-nocookie.com/watch?v=V0GTy6B2-JA&pp=ygUxQ1NTIOeWkeS8vOOCr-ODqeOCueOCu-ODrOOCr-OCv-ODvCAo6Kmz57SwKSZobD1KQQ%3D%3D
 
 
疑似クラス(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. 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>

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

図: css first-child sample
図: css first-child sample

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. n番目の子

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>

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

図: css pseudo-class nth-childの例 
図: css pseudo-class nth-childの例
 

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

【CSS #3】基礎からちゃんと学ぶ CSS 入門！この講座だけでセレクターは完結できます！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
https://www.youtube-nocookie.com/watch?v=3RX0ASjozkc&pp=ygUxQ1NTIOeWkeS8vOOCr-ODqeOCueOCu-ODrOOCr-OCv-ODvCAo6Kmz57SwKSZobD1KQQ%3D%3D
1-1 構造的な擬似要素の応用（CSSの高度なセレクタ）
https://www.youtube-nocookie.com/watch?v=V0GTy6B2-JA&pp=ygUxQ1NTIOeWkeS8vOOCr-ODqeOCueOCu-ODrOOCr-OCv-ODvCAo6Kmz57SwKSZobD1KQQ%3D%3D

最新記事一覧

関連記事一覧