ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。
やりたい事
下のコードの奇数番目の配置を反対にしたい。
<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>…長男、次男、三男

コメント