全ての要素の最初や最後の子要素を指定する方法

ニュースやコラムなど投稿ページを作成した時に、中のhタグやpタグを設定しますが、次にどの要素が来てもいいように大体上下に余白をつけます。（見出しとか特に。）

ただ、そうすると一番上の要素に余白ができてしまいます。この余白がいらないっ！！！！

で、最初の要素や最後の要素を指定したいと思って、ネットで検索してみても大抵出てくるのはli:first-childなどliを使って紹介するものばかり。。。。違う！それだとliしか入れられないじゃん！

というわけで今回は「全ての要素の最初や最後の子要素を指定する方法」をご紹介します！

目次非表示

目次へ

今回やりたいこと

やりたいこととしては、どの要素が来ても最初の要素を指定したいということです。

例えば、「最初の要素指定」などで検索すると、大体下のようなものばかり。

<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

li:first-child {
  margin-top: 0;
}

これだとliで構成されたものしか対応することができません。

やりたいことは、下のような最初にpが来るのかh2が来るのか画像がくるのかetc…という時に、何が来ても最初の要素を指定することです。

<div class="box">
  <p>テキスト</p>
  <h2>テキスト</h2>
  <p>テキスト</p>
  <h3>テキスト</h3>
  <p>テキスト</p>
</div>

h2:first-child、p:first-childなど最初に配置されることが考えられる要素に対して、first-childを指定していくことでできなくもないが、ちょっとナンセンスだ。

では、「どの要素が来ても最初の要素を指定したい」を解決するための方法です。

やり方はとっても簡単。下記のCSSを記述するだけです。

*:first-child {
  margin-top: 0;
}

すべての要素の中の一番最初という指定なので、上のCSSの場合「一番最初の要素だけ上の余白が0」ということになります。

以外に、全指定のコイツ（*）忘れがちです。

これを応用すれば、ある要素の中の一番最初ということもできます。

やりかたは先ほどのコードを対象のクラスの中で指定するだけ

.box *:first-child {
  margin-top: 0;
}

これでboxというクラスの中にある最初の要素の上の要素が0になります。

first-childをlast-childに変更すれば、一番最後の要素を指定することができます。