マンガでわかるホームページ作成

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">
    <h2>タイトル</h2>
    <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最後の要素

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">
    <h2>タイトル</h2>
    <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で最初の要素・最後の要素にだけ指定する方法でした。

関連記事