CSSの:first-childと:last-childの使い方を完全ガイド！初心者でもわかる使い分け

:first-childと:last-childの使い分けと注意点

先生と生徒の会話形式で理解しよう

生徒

「リストの最初だけ色を変えたり、最後だけ線を消したりしたいのですが、一つずつクラスをつけるのは大変です。」

先生

「そんな時はCSSの疑似クラス、:first-childや:last-childを使うと便利ですよ。」

生徒

「難しそうな名前ですね。具体的にはどのように使い分けるんですか？」

先生

「一番目の要素、最後の要素を自動で判別してくれるんです。基本的な使い方から注意点まで見ていきましょう！」

1. 疑似クラスの基本！最初と最後を自動で選ぶ方法

ウェブサイトを作っていると、「リストの最初だけ特別に目立たせたい」とか「一番最後だけ余白を消したい」という場面によく遭遇します。通常、これを行うにはHTMLに特別な目印（クラス）を書き込む必要がありますが、数が増えると管理がとても大変になります。

そこで役立つのが疑似クラス（ぎじくらす）です。これは、HTMLの構造を見て「何番目にあるか」をコンピュータが自動的に判断してスタイルを適用してくれる仕組みです。:first-child（ファーストチャイルド）は「最初の子要素」、:last-child（ラストチャイルド）は「最後の子要素」という意味を持ちます。これを使えば、HTMLを汚さずにスマートなデザインを実現できます。

2. first-childでリストの一番目を目立たせる

まずは、:first-childの使い方から見ていきましょう。これは、同じ階層にある要素の中で、一番最初に登場する要素を指名するためのものです。例えば、ニュース一覧の最新記事だけ文字を大きくしたり、メニューバーの一番左端だけ左側の余白をなくしたりするときに非常に重宝します。

プログラミング未経験の方には、「三兄弟の長男だけにお小遣いをあげる」というルールを決めるようなものだと想像してください。何人兄弟になっても、常に一番上の子だけが対象になります。設定方法は、要素名の後ろにコロンをつけて記述するだけです。


<style>
    .sample-list li {
        color: black;
    }
    /* 一番最初の項目だけ赤色にする */
    .sample-list li:first-child {
        color: red;
        font-weight: bold;
    }
</style>

<ul class="sample-list">
    <li>最新のニュース（一番目）</li>
    <li>昨日のニュース（二番目）</li>
    <li>先週のニュース（三番目）</li>
</ul>

ブラウザ表示

最新のニュース（一番目）
昨日のニュース（二番目）
先週のニュース（三番目）

3. last-childでデザインの仕上げ！最後の線を消す

次に、:last-childです。これは名前の通り、一番最後に配置されている要素を指します。よくある使いどころは、要素同士の間に引いている「区切り線」の処理です。各項目の下に線を引くと、一番最後の項目の下にも線が出てしまい、デザイン的に少し不格好になることがありますよね。

そんな時に「最後の子だけは線を引かない」という指定をすれば、スッキリとした見た目になります。これも三兄弟で例えるなら「末っ子だけは食器洗いを免除する」という決まりを作るようなものです。新しく弟や妹が増えても、常にその時の末っ子が自動的に選ばれます。手作業で線を消して回る必要はありません。


<style>
    .border-list li {
        border-bottom: 1px solid #ccc;
        padding: 10px;
        list-style: none;
    }
    /* 一番最後の項目だけ下線を消す */
    .border-list li:last-child {
        border-bottom: none;
    }
</style>

<ul class="border-list">
    <li>りんご</li>
    <li>みかん</li>
    <li>バナナ（ここだけ線が消えます）</li>
</ul>

ブラウザ表示

りんご
みかん
バナナ（ここだけ線が消えます）

4. 初心者がハマる！childの本当の意味と注意点

ここで非常に重要な注意点があります。:first-childを「そのクラスがついた中での一番目」だと思い込んでしまうと、スタイルが効かずに悩むことになります。正確には「親要素から見て、本当に一番最初の子であること」が条件なのです。

例えば、あるグループの中にタイトル（h2）があり、その後に文章（p）が続いている場合、最初の文章に「p:first-child」と指定しても反応しません。なぜなら、そのグループの本当の一番目の子はタイトル（h2）だからです。コンピュータは「お前はpタグだけど、親から見れば二番目の子だよね」と判断してしまいます。この親子関係のルールを理解することが、CSSマスターへの第一歩です。

5. 写真ギャラリーでの活用例！枠線のコントロール

画像を表示するときにも疑似クラスは活躍します。例えば、横に並べた画像に影をつけたり、角を丸くしたりする場合です。一番左の画像だけ左上の角を丸くし、一番右の画像だけ右上の角を丸くすれば、全体として一つのまとまったタブのようなデザインを作ることができます。

パソコンの操作に慣れていない方でも、スマートフォンのアプリなどで、一番上と一番下だけが丸くなっているリストを見たことがあるでしょう。あれもこの技術が使われています。特定の場所にだけ特別な魔法をかけることで、ユーザーにとって見やすく、心地よい画面構成を作ることができるのです。


<style>
    .gallery img {
        border: 2px solid #ddd;
        margin: 5px;
    }
    /* 最初の画像だけ特別な枠色にする */
    .gallery img:first-child {
        border-color: #ffcc00;
    }
</style>

<div class="gallery">
    <img src="/img/sample120-120.jpg" alt="画像1">
    <img src="/img/sample120-120.jpg" alt="画像2">
    <img src="/img/sample120-120.jpg" alt="画像3">
</div>

ブラウザ表示

6. 複雑な構造でも大丈夫！入れ子の管理

「子要素」という言葉が出てくると、入れ子構造（箱の中に箱がある状態）が難しく感じるかもしれません。しかし、疑似クラスはあくまで「直上の親」から見た順番で決まります。大きな箱の中の一番目、さらにその中にある小さな箱の一番目、というように、それぞれの階層ごとに:first-childは存在します。

これを活用すれば、複雑な表（テーブル）の、一番上の行かつ一番左のマスだけを装飾するといった細かい制御も可能になります。最初は単純なリストから練習して、徐々に大きな構造に挑戦していきましょう。コンピュータは常に公平に、親から見た順番を数えてくれています。

7. 万能選手！nth-childとの使い分け

最初と最後だけでなく、二番目や三番目、あるいは「偶数番目だけ」を選びたいときはどうすればいいでしょうか。そんな時は、:nth-child(n)（エヌスチャイルド）という疑似クラスを使います。これを使えば、より自由自在に要素を選び出すことができます。

実は「:first-child」は「:nth-child(1)」と書くのと同じ意味ですし、「:last-child」は「最後から数えて一番目」を意味する「:nth-last-child(1)」に近い存在です。しかし、最初と最後は非常によく使うため、専用の言葉が用意されています。まずは覚えやすい専用の言葉から使い始め、物足りなくなったら数字で指定する方法に進むのが、上達の近道です。

8. レイアウトが崩れないためのプロの知恵

:last-childを使って余白（マージン）を消す手法は、現代のウェブデザインでは定番です。例えば、横並びのカードデザインで、各カードの右側に隙間を作っている場合、一番右のカードの隙間だけを消さないと、全体の幅が計算より大きくなってしまい、端っこのカードが下の段に落ちてしまう（レイアウト崩れ）が起きます。

「最後だけ余白なし！」というルールを:last-childで徹底することで、画面の幅ぴったりに要素を並べることができます。プロの現場では、こうした小さな設定の積み重ねで、どんな画面サイズでも綺麗に見えるサイトを作り上げています。皆さんもぜひ、最後の仕上げにこのテクニックを取り入れてみてください。


<style>
    .card-container {
        display: flex;
        background-color: #f9f9f9;
        padding: 10px;
    }
    .card {
        background: white;
        margin-right: 20px; /* 右側に隙間を作る */
        padding: 10px;
        border: 1px solid #ddd;
    }
    /* 一番最後のカードだけ隙間をなくして端に合わせる */
    .card:last-child {
        margin-right: 0;
    }
</style>

<div class="card-container">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
    <div class="card">カード3</div>
</div>

ブラウザ表示

カード1

カード2

カード3

9. 実践！デザインをワンランクアップさせるコツ

最後に、疑似クラスをより効果的に使うためのコツを伝授します。それは「変化をつけすぎないこと」です。最初だけ色を真っ赤にしたり、最後だけ文字を巨大にしたりすると、かえって読みづらくなってしまいます。プロのデザインは、よく見ると「あ、ここだけ少し違うな」と気づく程度の繊細な変化をつけています。

例えば、最初の文字の太さを少しだけ太くする、あるいは最後の要素の下にだけわずかな余白を追加するといった具合です。:first-childと:last-childを使いこなせるようになると、HTMLを一切書き換えずにCSSだけでデザインの表情を豊かに変えることができます。ぜひ、今日から自分のサイトで試してみてくださいね！

2026年最新スキルアップ・実践セミナー