ニュースやコラムなど投稿ページを作成した時に、中の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に変更すれば、一番最後の要素を指定することができます。