【SCSS/CSS🔰】nth-childってどこで設定する?

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

やりたい事

下のコードの奇数番目の配置を反対にしたい。

          <ul>
            <li>
              <article>
                <div>
                  <img/>
                </div>
                <div>
                  <h3></h3>
                  <p>
                  </p>
                </div>
              </article>
            </li>
            <li>
              <article>
                <div>
                  <img/>
                </div>
                <div>
                  <h3></h3>
                  <p>
                  </p>
                </div>
              </article>
            </li>
            <li>
              <article>
                <div>
                  <img/>
                </div>
                <div>
                  <h3></h3>
                  <p>
                  </p>
                </div>
              </article>
            </li>
          </ul>

対象方法

liタグ(兄弟)にnth-child(odd)を設定する。
実際、配置を変えたいのはarticleタグのところなのでarticleタグに設置しがちだが、nth-childが何を数えているのかが重要。
今回、子どもの数を数えているのでliタグに設定する。

<ul>…親
<li>…子
<article>…長男、次男、三男

コメント