　こんにちは。かじです。

　今回は、CSSの疑似クラスnth-child()と謎の~である一般兄弟セレクタについて解説します。

1.疑似クラスとは

　疑似クラスとは、特定の状態の時に適用するスタイリングになります。皆さんに一番馴染みのあるものが、hoverだと思います。

a:hover{
  color:green
}

上記の場合、<a>タグ要素にマウスカーソルを充てる色が緑になります。

　他にも適用したい、既に訪問したことのあるリンク先である場合のvisitedや、有効でないインプットデータである場合のinvalidなどが馴染みがあるものがあるかもしれません。

　詳細は下記リンクを参照ください。

　このように特定の条件時に、充てるのが、疑似クラスになります。

2.nth-child()とは

　次にnth-child()についてです。

　MDN WEB DOCSでは、下記のように説明されています。

:nth-child() は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。

　あまり親切な説明ではないですね。

　そもそも兄弟要素とは何でしょうか。

　兄弟要素とはHTML内で同じ親要素を持っている、並列の関係にある要素のことです。

　例えば、下記のようなパターンを見てましょう。

<ul>

   <li>リンゴ</li>

   <li>みかん</li>

</ul>

とあれば、<li>リンゴ</li>と<li>みかん</li>は兄弟関係であると言えます。

　話は戻ってnth-child()の説明で、兄弟要素まではクリアしました。次に、公式ドキュメントの説明にある「グループの中での位置に基づいた選択」についてです。

　これは「兄弟要素の中で何番目にある要素であるか？」になります。先ほどの例ですと、リンゴは1番目の<li>要素になりますし、みかんは2番目になります。

　という訳で、nth-child(n)は同じ親要素の中でn番目にある要素の状態を指定している疑似クラスになります。

ul li:nth-child(1).active{
}

　このような上記のHTMLにCSSが当たっていたとしたら、リンゴの要素にactiveクラスがあったらという状態を指す疑似クラスになります。

ul li:nth-child(1).active ~ p{
}

　このようなCSSのセレクタがある場合、この「~」ってなんやねんとなりますね。

　これは一般兄弟セレクタといいます。同じ親要素の下にある、一つ目の要素の後ろにある、初めの~後の要素(上記の例だと<p>)を指します。一つ目の要素の直後である必要はありません。

　一般兄弟セレクタの使用例は下記のようになります。

<h1>例</h1><p>赤になります。</p>

h1 ~ p{
   color:red;
}

赤になります。

　今回はここまでになります。

　最後まで閲覧くださり、ありがとうございました。

– 画像出展元 –