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

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

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

そこで今回は、

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

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

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

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

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

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

この記事の目次

1 CSSの疑似クラス「last-child」とは？
2 CSSの疑似クラス「last-child」の使い方
3 CSSの疑似クラス「last-child」の使いどころ
4 要素の位置を指定する他の疑似クラスは？
5 まとめ

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

まず、CSSの疑似クラス「last-child」について簡単に解説します。

last-childは要素の最後のみにCSSを適用するための疑似クラスです。

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

サンプル：

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

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

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

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

使い方：

〇〇〇〇:last-child{

}

〇〇〇〇:last-child{

}

例：

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

}

/* class名「text-list」の最後にデザイン設定 */
.text-list: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>

<!DOCTYPE html>

<head>

<title>「last-child」サンプル</title>

</head>

<body>

<h2>「last-child」サンプル</h2>

<ul>

<li>python</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;
}