hamayuzinの日記

ITベンチャーに新卒入社し、エンジニアとかデータサイエンティスト、とかやってます。あの時 あれやってたな的な備忘録にできれば。

【0からやり直すフロント/html/css】nth-child と nth-of-type

要素の偶数個だけ、背景色変えたいとかで使える nth-child と nth-of-type

<div>
  <h1>見出し</h1>
  <p>1つ目の段落</p>
  <p>2つ目の段落</p>
</div>

nth-child

親要素のn番目の要素に適応する p:nth-of-chile(2)の場合

親要素の2番目がPであれば、適応する

今回であれば、1つ目の段落

nth-child

p:nth-of-type(2)の場合

親要素の中の pタグのうちの、2番めの要素に適応する 今回であれば、2つ目の段落