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

ニュースやコラムなど投稿ページを作成した時に、中の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を記述するだけです。

CSS

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

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

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

応用

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

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

CSS

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です