first-childが効かなかったので

CSS HTML

first-childが効かない時の対処方法。

first-childが効かない例

例えば以下のようなHTML構造になっている場合、

<div class="myClass">
  <h1>title</h1>
  <p>hoge</p>
  <p>hoge</p>
  <p>hoge</p>
</div>

以下のようなCSSは適用されません。

.myClass p:first-child {
  background-color: red;
}

これは、myClassの最初の子要素がpではなくh1要素であるためです。

修正方法

要は、ある要素の中で1番目の要素にすればいいわけです。なので、

<div class="myClass">
  <h1>title</h1>
  <div>
    <p>hoge</p>
    <p>hoge</p>
    <p>hoge</p>
    <p>hoge</p>
  </div>
</div>

こんな感じでしょうか。
ただし、この方法ではHTMLの構造が変化してしまいますので、そこはいろいろ調整する必要はありますのでご留意ください。