構造疑似クラス

3.1 疑似クラス :first-child

CSSの構造疑似クラスは、ドキュメントツリー内の位置に基づいて要素を選択してスタイルを適用するのに役立つよ。 特定の要素に適用される、より詳細で細かいスタイルを作成するのに特に便利だよ。 疑似クラス:first-child、:last-child、:nth-child、および:nth-of-typeを見てみよう。

:first-child擬似クラスは、親要素の最初の子要素を選択するよ。リストや段落のような同じタイプの要素のグループの最初の要素にスタイルを適用するのに便利だよ。

構文:

    
      セレクタ:first-child {
        プロパティ: 値;
      }
    
  

使用例

この例では、リストの最初の要素が太字で赤色になり、div内の最初の段落が大文字に変換されるよ:

    
      /* リストの最初の要素にスタイルを適用する */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* div内の最初の段落にスタイルを適用する */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 疑似クラス :last-child

疑似クラス:last-childは、親要素の最後の子要素を選択するよ。グループ内の最後の要素にスタイルを適用するために使われるね。

構文:

    
      セレクタ:last-child {
        プロパティ: 値;
      }
    
  

使用例

この例では、リストの最後の要素が斜体で青色になり、div内の最後の段落が下線で装飾されるよ:

    
      /* リストの最後の要素にスタイルを適用する */

      li:last-child {
        font-style: italic;
        color: blue;
      }

      /* div内の最後の段落にスタイルを適用する */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 疑似クラス :nth-child

疑似クラス:nth-childは、グループ内の位置に基づいて要素を選択することができるよ。これは、どの要素を選択するかを決定する引数を取るよ。引数は数値、キーワード、または式にすることができるんだ。

構文:

    
      セレクタnth-child(引数) {
        プロパティ: 値;
      }
    
  

引数:

• 数値: 指定された位置にある要素を選択
• キーワード: odd（奇数）とeven（偶数）
• 式: an+b形式で、ここでaとbは数値

例1: 奇数の要素を選択

この例では、リストのすべての奇数要素にライトグレーの背景色を設定してスタイルを適用するよ:

    
      /* リストの奇数要素にスタイルを適用する */

      li:nth-child(odd) {
        background-color: #f0f0f0;
      }
    
  

例2: 特定の位置にある要素を選択

この例では、リストの3番目の要素が太字で緑色になるよ:

    
      /* リストの3番目の要素にスタイルを適用する */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

例3: 式を使用する

この例では、最初の要素から始まる各2番目の要素にライトグレーの背景色を設定してスタイルを適用するよ:

    
      /* 最初の要素から始まる各2番目の要素にスタイルを適用する */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 疑似クラス :nth-of-type

疑似クラス:nth-of-typeは:nth-childに似ているけど、親要素の子要素間でのタイプに基づいて要素を選択するよ。 これにより、最初の子でなくても、特定のタイプの要素を選択することができるんだ。

構文:

    
      セレクタ:nth-of-type(引数) {
        プロパティ: 値;
      }
    
  

引数:

• 数値: 同じタイプの要素の中で指定された位置にある要素を選択
• キーワード: odd（奇数）とeven（偶数）
• 式: an+b形式で、ここでaとbは数値

例1: 偶数の段落を選択

この例では、すべての偶数段落にライトグレーの背景色を設定してスタイルを適用するよ:

    
      /* 偶数段落にスタイルを適用する */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

例2: 同じタイプの中で特定の位置にある要素を選択

この例では、2番目のh2見出しが大きくなりオレンジ色になるよ:

    
      /* 2番目のh2見出しにスタイルを適用する */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

例3: 式を使用する

この例では、2番目から始まる各3番目のリスト要素にライトグレーの背景色を設定してスタイルを適用するよ:

    
      /* 2番目から始まる各3番目のリスト要素にスタイルを適用する */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }