CodePen Embed - :first-childの失敗例

<div>
  <h2>タイトル</h2><!--最初の子要素-->
  <p>ダミーテキスト</p><!--2番目の子要素になり適用されない-->
  <p>ダミーテキスト</p>
</div>

<div>
  <p>ダミーテキスト</p><!--最初の子要素-->
  <h2>タイトル</h2>
  <p>ダミーテキスト</p>
</div>

p:first-child {
  color:red;
}

div:first-child {
  margin-bottom: 50px;
}

This Pen is owned by niwaka-web on CodePen.

See more by @niwaka-web on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.