CSSの疑似クラスlast-childとは?その他のおすすめ疑似クラスも解説!

皆さんは、CSSで疑似クラス「last-child」を使ったことがありますか?

画面でリスト・テーブルなどにデザインを付けるとき、last-childの使い方を覚えておくと便利です。

そこで今回は、

  • CSSの疑似クラス「last-child」とは?
  • CSSの疑似クラス「last-child」の使い方


といった基礎的なことから、

  • CSSの疑似クラス「last-child」の使いどころ
  • 要素の位置を指定する他の疑似クラスは?


といった応用的な方法まで、徹底的に解説します!

CSSの疑似クラス「last-child」とは?

まず、CSSの疑似クラス「last-child」について簡単に解説します。last-childは要素の最後のみにCSSを適用するための疑似クラスです

たとえば、リストの最後のみデザインを加えたいときに使います。

サンプル:

直接クラスを用意しなくてもデザインを設定できるので、使い方を覚えておくと便利です!

CSSの疑似クラス「last-child」の使い方

次に、具体的な「last-child」の使い方について解説します。

使い方は、次のとおりです。

使い方:

〇〇〇〇:last-child{

}

例:

/* liタグの最後にデザイン設定 */
li:last-child{

}

/* class名「text-list」の最後にデザイン設定 */
.text-list:last-child{

}

このように、簡単に「:last-child」をつけるだけで、要素の最後にCSSを指定することができます。

CSSの疑似クラス「last-child」の使いどころ

では、どのようなタイミングでCSSの疑似クラス「last-child」を使うのでしょうか?

よくあるのが、横並びのリストで最後のみデザインを消したいとき、たとえば、liタグの右側に罫線を引くことで、要素を区切って表示するような場合です。そのまま設定した場合は、次のように最後のリストにも区切り線が表示されてしまいます。

区切り線が最後にも表示されてしまうサンプル:

本来あるべき姿は、以下ですよね。

本来あるべき姿:

上記のように最後のみデザインを変更したい場合は、「last-child」を使います!

サンプルコード - HTML:

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>「last-child」サンプル</title>

        <link rel="stylesheet" href="2_main.CSS">
    </head>

    <body>
        <h2>「last-child」サンプル</h2>
        <div class="box">
            <ul>
                <li>python</li>
                <li>php</li>
                <li>vba</li>
                <li>ruby</li>
            </ul>
        </div>
    </body>

</html>

サンプルコード - CSS:

/* liタグ全体の設定 */
li {
    width:100px;
    float:left;                      /* 横並びで表示 */
    list-style-type:none;            /* リストに表示される「●」を非表示*/
    border-right:1px solid #000;   /* 右に区切り線を表示*/
}

/* liタグの最後のみ枠線を消す設定 */
li:last-child{
    border-right:none;
}

/* わかりやすくするために、枠線のクラスを用意 */
.box{
    border:solid 1px grey;
    text-align:center;               
    padding: 10px 0px;
    overflow:hidden;
    width:500px;
}

実行結果:

最後の区切り線を消すことができていますよね。

このように、全体に設定したデザインから、最後の要素のみ消すときに使うケースが多いため、使い方とあわせて覚えておくのがおすすめです!

要素の位置を指定する他の疑似クラスは?

ここまで疑似クラス「last-child」の概要・使い方・具体的な使いどころについて解説してきました。

ただ、最初の要素のデザインを変えたい場合や、要素の番号を指定してデザインを変更したいケースもありますよね。last-childの仲間の疑似クラスがいくつかあるので、合わせて覚えておくのがおすすめです!

要素の位置を指定した疑似クラス一覧:

No書き方意味
1:first-child最初
2:last-child最後
3:nth-child(n)n番目
4:nth-last-child(n)後ろからn番目

「first-child」使い方は、疑似クラス「last-child」と同じです。

「nth-child(n)」は前からn番目要素、「nth-last-child(n)」は後ろからn番目の要素に指定することができます。

まとめ

今回は、最後の要素にデザインを指定するための疑似クラス「last-child」について解説しました。

クラスを直接指定してデザインを指定することもできますが、CSSが膨大な量になってしまうこともあるので、疑似クラスの使い方を覚えておくと便利です!

使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。