nth-childについて

Question

liの中の2番目だけを変えたいです

以下の2番目のliの中身をを変更したいのです。
例えば2番目のsection-about__titleの色だけを変える場合は、どのようなcssを書けばよいのでしょうか。

該当のソースコード

<li>
        <div class="section-about__item">
          <p class="section-about__number">01.</p>
          <h2 class="section-about__title">タイトル</h2>
          <p class="section-about__discription">本文</p>
          <p class="section-about__picture"><img src="" alt=""></p>
        </div>
      </li>
      <li>
        <div class="section-about__item">
          <p class="section-about__number">02.</p>
          <h2 class="section-about__title">タイトル</h2>
          <p class="section-about__discription">本文</p>
          <p class="section-about__picture"><img src="" alt="" ></p>
        </div>
      </li>
      <li>
        <div class="section-about__item">
          <p class="section-about__number">03.</p>
          <h2 class="section-about__title">タイトル</h2>
          <p class="section-about__discription">本文</p>
          <p class="section-about__picture"> <img src="" alt=""> </p>
        </div>
      </li>
    </ol>

試したこと

.section-about__title:nth-child(even)にしましたが、反応しませんでした。
原因を調べると、nth-childは親要素内の何番目（この場合は偶数）ということなので、クラス名とリンクしないので反応しなかったということがわかりました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[K_3578]

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
MDN見たら解決しませんか？

[an_14]

一度MDNも見てみたのですが、初心者なもので中々理解できず質問させていただきました。
サイト貼っていただいて、ありがとうございます！

[K_3578]

MDNの書き方は初心者の方には少し堅苦しいかもしれませんが、cssとかの問題は大体MDNで自己解決できることが多いので例を基に書いてみるようにしたらいいと思います。質問するより絶対早く解決できるので。

[an_14]

仰る通りです。自己解決できるように務めます。アドバイスありがとうございます。

Answer 1

「2番目のliの中身のsection-about__titleを変更したい」ということですね。

li:nth-child(2) .section-about__title{
  color: red;
}

Comments

[an_14]

ありがとうございます！解決致しました！！

Answer 2

liの2番目ということであれば、li:nth-child(2)を指定します。

li:nth-child(2) .section-about__title {
  color: red;
}

Comments

[an_14]

ありがとうございます！無事解決しました！！