CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:last-child疑似クラスとは？使い方を実例付きで解説

CSSの :last-child 疑似クラスは、ある親要素の中で「最後の子要素」となる要素を選択するためのセレクタです。リストの最終項目だけ色を変えたい、表の右端の列だけ罫線を引きたい、といった場面で非常に便利です。

基本構文

:last-child の書き方は以下の通りです。

:last-child {
    /* 宣言（スタイル定義） */
}

例1：テーブルの最後の列にスタイルを適用する

まずは、表（table）に対して :last-child を使った具体例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    margin: auto;
    padding: 10px;
    border: hsl(54, 100%, 50%) solid 13px;
    border-radius: 6px;
    text-align: center;
}
td, th {
    border-left: 2px solid black;
    border-top: 3px solid black;
}
td:last-child, th:last-child {
    border-right: 2px solid black;
}
th {
    background-color: lightblue;
    border-top: none;
}
caption {
    margin-top: 3px;
    background-color: purple;
    caption-side: bottom;
    color: white;
    border-radius: 20%;
}
</style>
</head>
<body>
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Table</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
</body>
</html>

出力結果

:last-child 疑似クラスを使用する前の表示：

CSSの:last-child疑似クラスとは？使い方を実例付きで解説

:last-child 疑似クラスを使用した後の表示：

CSSの:last-child疑似クラスとは？使い方を実例付きで解説

この例では td:last-child, th:last-child を指定することで、各行の最後のセル（右端の列）にのみ右側の罫線が適用され、表全体がきれいに閉じた見た目になります。

例2：リストの各項目に異なるスタイルを適用する

次に、:first-child や :nth-child() と組み合わせて、リスト項目ごとに異なるデザインを適用する例を紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
* {
    font-size: 1.1em;
    list-style: circle;
}
li:first-child {
    background-color: seashell;
    font-family: cursive;
}
li:nth-child(2) {
    background-color: azure;
    font-family: "Brush Script Std", serif;
}
li:last-child {
    background-color: springgreen;
    font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>What is PHP?</h2>
<ul>
<li>PHP is a recursive acronym for "PHP: Hypertext Preprocessor".</li>
<li>PHP is a server side scripting language that is embedded in HTML.</li>
<li>It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.</li>
</ul>
</body>
</html>

出力結果

CSSの:last-child疑似クラスとは？使い方を実例付きで解説

このように、1番目の項目には :first-child、2番目には :nth-child(2)、そして最後の項目には :last-child がそれぞれマッチし、背景色やフォントが個別に切り替わっていることが確認できます。

まとめ

:last-child 疑似クラスは、親要素内の最後の子要素だけを簡単に装飾できる強力なセレクタです。HTML側に余分なクラス名を追加することなくCSSだけで制御できるため、コードの保守性も向上します。:first-child や :nth-child() と組み合わせれば、より柔軟で洗練されたスタイリングが可能になります。

  1. CSSの:nth-child()疑似クラスの使い方と実例まとめ

    CSSの:nth-child()疑似クラスは、親要素の中でn番目に位置する子要素を選択するためのセレクタです。リストやカード型レイアウトなど、繰り返し表示される要素のうち特定の位置だけにスタイルを適用したい場合に非常に便利です。 構文 :nth-child()疑似クラスの基本構文は以下のとおりです。 :nth-child(n){     /*スタイル宣言*/ } 引数には単純な数値のほか、「odd（奇数番目）」「even（偶数番目）」といったキーワードや、「2n+1」のような数式も指定できるため、柔軟なスタイリングが可能です。 例1：複数のボックスに個別の背景色を適用する

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &