:nth-child()が、(個人的に)便利すぎた！【備忘録】

おはようございます！
今日は、CSSで、最近学んだことがあり、まとめてみようと思います！

【状況】
箱型の要素をいくつか並べていたんです。しかも複数行。最初の箱は、特にmarginの調整したくなかったのですが、各行の特定の位置にある箱のmarginは調整したい！！

いつもの私だったら、「これくらいの量だったら、1つ1つクラス当ててくかー！」って思っていました。
ただ、(なぜか?)今回は違いました。
「今後も増えてく可能性あるし、そうなったら毎回位置確認してクラス当て直しになるやん！めんどくさっ！位置指定して、各行のその位置にある要素に一括でスタイル適用することってできひんのかなー？？」
と、思ったのです！

その時、:nth-child()に出会いました。
:nth-child()の便利さに感動したので、その体験を皆さんにも共有させて頂きます！！

それでは、早速、解説していきます！

:nth-child()とは

まず、:nth-child()とは何なのか、MDNで調べてみましょう。

:nth-child()

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

まず、:nth-child()は、疑似クラスと呼ばれるものの1種であることが読み取れます。
では、疑似クラスとは何なのでしょうか？

疑似クラスとは

疑似クラス

CSSの擬似クラスPseudo-classesは、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
出典)MDN 疑似クラス

「セレクター」は、スタイルを適用する要素を表します。h1やdivなどの要素名で記述しても良いし、クラスを当てている要素であれば、「.クラス名」でも良いですね。

【例】タイトルの中央寄せ

<h1>タイトル</h1>
<h1 class="title">タイトル</h1>

h1 {
  text-align: center;
}

.title {
  text-align: center;
}

「選択された特定の状態を指定します」の部分は、具体的な例を挙げて説明してくれていますね！aタグでよく使う:hoverですね！
aタグで:hoverを使うときは、要素にカーソルを重ねたときのスタイルを指定しますね！例えば、色を変えたりとか！

【例】要素の上にカーソルを重ねると文字色が赤に変わるように指定

<a href="https://www.google.com/">グーグル</a>

a:hover {
  color: red;
}

【カーソル乗せる前】

【カーソルを乗せた状態】※スクショしてカーソルが見えなくなっているだけです。

ちゃんと【カーソルを乗せた状態】では、文字色が赤くなっていますね！

通常のスタイル指定と違うのは...
【通常】
h1や、divなどの要素を指定するだけ。

【疑似クラス】
「ユーザーが要素にカーソルを重ねたとき」「チェックボックスにチェックが入っているとき」など、対象の要素の状態に合わせてスタイルを変化させることができる！！

固定された要素指定だけではなく、状態に合わせてスタイルが指定できるって便利ですよね！

疑似クラスがわかったところで、:nth-child()について、詳しく確認して行きましょう！

:nth-child()の使い方

:nth-child()は疑似クラス。
疑似クラスとは、要素の状態に合わせてスタイル指定をするためのキーワード。

:nth-child()が表している状態とはどういう状態を指しているのでしょうか？
もう少し詳しい解説を見つけたので、引用してみます。

「:nth-child()」を利用すると、同一の階層の全ての要素をカウントし、「An+B」番目の要素を適用先にすることができます。
出典)エビスコム著 『HTML5 & CSS3 デザイン　現場の新標準ガイド【第2版】』(2020)p.121

同一階層の全ての要素っていうところは、1つのポイントですね！ 疑似クラスが、「要素の状態に合わせてスタイル指定する」ことがわかっているので、この文章だけでも、理解できてしまう方もいるかもしれないですね！ 次のHTMLを例に詳しく見ていきましょう！

【例】

<div class="boxes">
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
</div>
<div class="boxes">
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
     <h2>ボックス</h2>
     <p>これは箱だよ。</p>
  </div>
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
     <h2>ボックス</h2>
     <p>これは箱だよ。</p>
  </div>
</div>
<div class="boxes">
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
  <div class="box">
    <h2>ボックス</h2>
    <p>これは箱だよ。</p>
  </div>
</div>

.boxes {
  display: flex;
  margin-bottom: 15px;
}

.box {
  border: 2px solid #333;
}

【この例でやりたいこと】
各行のボックスの左にmarginをとりたい！ただし、各行の最初のボックの左にはmarginいらない...

この量だと1つ1つクラスを当てるの面倒じゃないですか？？
こういうとき、:nth-child()を使うと簡単に、指定できてしまいます。

:nth-child()が表す状態は...An+B番目にある状態
Aは、何個おきかを表します。
B、B+1、B+2...というような場合(eg: 1番目、2番目、3番目...)や、A=1になります。
↓
この例では、2番目以降にある状態の要素にスタイル指定したい。つまり、
An+B = 1n+2。1はなくて良いので、n+2となります。
:nth-child(n+2)をセレクタとして用いて、margin-leftを指定すると、【この例でやりたいこと】が達成できます。

.boxes .box:nth-child(n+2) {
  margin-left: 15px;
}

結果は以下です。
きちんと、各行2番目以降のボックスたちの左にmarginが指定され、間隔が整いました！
親要素.boxesの範囲内にある要素の中で、最初から2番目以降にある要素全てに、スタイル指定が適用されたのです！
こんな少ない記述で、いちいちクラスを当てにいかずとも一気に指定できたら便利ですよね！！！

今回は、2番目以降の要素に指定したかったので、n+2となりました。ですが、「その番号の位置にある要素だけ」や、「奇数番目にある要素だけ」「偶数番目にある要素だけ」といった指定の仕方もできます。

その番号の位置にある要素	B
奇数番目にある要素	odd	2n+1
偶数番目にある要素	even	2n+2	2n
最初のB個	-n+B

また、今回説明したのは、最初から数えた場合ですが、後ろから数えることも可能です。この場合は、:nth-last-child()を使います！ やり方は一緒。ただ、最初から数えるか後ろから数えるかの違いだけです！

おわりに

まだまだ初心者の備忘録ですが、お読み頂きありがとうございました！
もし、間違いや、補足などございましたら、コメント頂けますと、嬉しいです！！

参考資料

MDN :nth-child()
MDN 疑似クラス
エビスコム著 『HTML5 & CSS3 デザイン　現場の新標準ガイド【第2版】』(2020)