CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明

第一子の習慣

first-child属性を使用して、 ulタグ内の最初のliタグのテキストの色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>構造擬似クラスセレクター</title>
  <スタイル>  
    ul li:最初の子{
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</本文>

</html>

結果プロット

末子の習慣

last-childプロパティを使用して、 ulタグ内の最後のliタグのテキストの色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>構造擬似クラスセレクター</title>
  <スタイル>  
    ul li:最後の子{
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</本文>

</html>

結果プロット

n番目の子の練習

nth-child(n)属性を使用して、 ulタグ内の 3 番目のliタグのテキストの色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>構造擬似クラスセレクター</title>
  <スタイル>  
    ul li:n番目の子(3){
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</本文>

</html>

結果プロット

nth-child(even)属性を使用して、 ulタグ内の偶数番目のliタグのテキスト色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>構造擬似クラスセレクター</title>
  <スタイル>  
    ul li:n番目の子(偶数){
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</本文>

</html>

結果プロット

nth-child(2n+1)属性を使用して、 ulタグ内の奇数番目のliタグのテキスト色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>構造擬似クラスセレクター</title>
  <スタイル>  
    ul li:n番目の子(2n+1){
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
</本文>

</html>

結果プロット

一人っ子の習慣

only-child属性を使用して、 ulタグ内のliタグの 1 つのみのテキストの色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>構造擬似クラスセレクター</title>
  <スタイル>  
    ul li:一人っ子{
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
   </ul>
   <ul>
     <li>li タグは 1 つだけ</li>
   </ul>
</本文>

</html>

結果プロット

疑似要素セレクタの紹介

疑似要素の主な機能は、要素のテキストを操作してコンテンツを追加することです。
擬似要素使用表

構造擬似クラスセレクタの紹介

構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されます。
構造擬似クラスセレクタプロパティの説明表

財産	説明する
E:最初の子	E 要素の最初の子と一致します。
E:最後の子	E 要素の最後の子と一致します。
E:n番目の子(n)	E という要素の n 番目の子と一致します。
E:n番目の子(2n) または E:n番目の子(偶数)	E 要素の偶数番目の子と一致します。
E:n番目の子(2n+1) または E:n番目の子(奇数)	E 要素の奇数番目の子と一致します。
E:一人っ子	E 要素の子 1 つに正確に一致します。

財産	説明する
E:最初の文字	E 要素の最初の単語を設定します。
E:最初の行	E 要素の最初のテキスト行を設定します。
E::前	E 要素の前にコンテンツを追加します。
E::後	E 要素の最後にコンテンツを追加します。

最初の文字の練習

first-letter属性を使用して、 ulタグ内のliタグ内のテキストの最初の文字の色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>疑似要素セレクター</title>
  <スタイル>  
    ul li:最初の文字{
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <ul>
     <li>笑顔は第一の信念です</li>
   </ul>
</本文>

</html>

結果プロット

第一線の実践

first-line属性を使用して、 divタグ内の最初の行のテキストの色を赤に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>疑似要素セレクター</title>
  <スタイル>  
    div:最初の行{
      色: 赤;
    }
  </スタイル>
</head>

<本文>
   <div>
     笑顔は最初の信念、笑顔は最初の信念、笑顔は最初の信念、笑顔は最初の信念、笑顔は最初の信念、
     笑顔は最初の信念です、笑顔は最初の信念です、笑顔は最初の信念です、笑顔は最初の信念です、笑顔は最初の信念です。
   </div>
</本文>
</html>

結果プロット

練習前

before属性を使用して、 divタグのテキストの前に「Come on」という 2 つの単語を追加します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>疑似要素セレクター</title>
  <スタイル>  
    div::before{
      内容:"さあ";
    }
  </スタイル>
</head>

<本文>
   <div>笑顔は第一の信念です。 </div>
</本文>

</html>

結果プロット

注意: 追加するテキストはcontent:"加油";内に記述する必要があります。

練習後

after属性を使用して、 divタグのテキストの末尾に「Come on」という 2 つの単語を追加します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
  <title>疑似要素セレクター</title>
  <スタイル>  
    div::after{
      内容:"さあ";
    }
  </スタイル>
</head>

<本文>
   <div>笑顔は第一の信念です。</div>
</本文>

</html>

結果プロット