CSSで最初の要素・最後の要素にだけ指定する方法
「CSSで最初の要素や最後の要素にだけ指定したい。でもいちいちclassを指定するのも面倒！」
そんなときは以下に紹介する疑似クラスで解決できます。
CSSで最初の要素・最後の要素にだけ指定する方法を説明します。
CSS最初の要素
CSSで最初の要素を指定する方法は以下の2つがあります。
赤字が指定した最初の要素です。
F:first-child
最初の要素がFなら
- 本文1
- 本文2
- 本文3
- 本文4
<style>
.example li:first-child{
color: red;
}
</style>
<ul class="example">
<li>本文1</li>
<li>本文2</li>
<li>本文3</li>
<li>本文4</li>
</ul>F:first-of-type
最初に現れるF
タイトル
本文1
本文2
本文3
本文4
<style>
.example p:first-of-type{
color: red;
}
</style>
<div class="example">
<h3>タイトル</h3>
<p>本文1</p>
<p>本文2</p>
<p>本文3</p>
<p>本文4</p>
<div>フッター</div>
</div>F:first-childでもF:first-of-typeでも基本的にはOKですが、F:first-childは1番目の要素がFでない場合は効きません。F:first-of-typeはFがでてきたらそのFにCSSが効きます。
F:first-of-typeで覚えておけばミスは少なくなるでしょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
CSS最後の要素
CSSで最後の要素を指定する方法は以下の2つがあります。
青字が指定した最後の要素です。
F:last-child
- 本文1
- 本文2
- 本文3
- 本文4
<style>
.example li:last-child{
color: blue;
}
</style>
<ul class="example">
<li>本文1</li>
<li>本文2</li>
<li>本文3</li>
<li>本文4</li>
</ul>F:last-of-type
タイトル
本文1
本文2
本文3
本文4
<style>
.example p:last-of-type{
color: blue;
}
</style>
<div class="example">
<h3>タイトル</h3>
<p>本文1</p>
<p>本文2</p>
<p>本文3</p>
<p>本文4</p>
<div>フッター</div>
</div>F:last-childでもF:last-of-typeでも基本的にはOKですが、F:last-childは最後の要素がFでない場合は効きません。F:last-of-typeは最後から数えてFがでてきたらそのFにCSSが効きます。
F:last-of-typeで覚えておけばミスは少なくなるでしょう。
まとめ
最初の要素
F:first-of-typeを使う
最後の要素
F:last-of-typeを使う
以上、CSSで最初の要素・最後の要素にだけ指定する方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
