last-childとは？CSSセレクターの基本と使い方を徹底解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

last-childとは？

last-child とは CSS の擬似クラスのひとつで、親要素の中で「最後の子要素」にだけスタイルを適用します。タイプに関係なく、最後に配置された子要素を対象にします。この特徴を使うと、リストの最後の項目だけを強調したり、段落の最後の要素だけを別のデザインにしたりといった、微妙なデザイン調整が簡単にできます。

重要な点は、last-child は「最後の子要素」であるかどうかを判定するだけで、子要素の種類を条件にしません。例えば、親要素の最後の子要素がリストアイテム（li）ではなく div だった場合、li:last-child は該当しません。代わりに

class="example">

が最後なら div:last-child が該当します。

使い方の基本

基本的な構文は次のとおりです。selector:last-child { property: value; } です。より具体的には、ul.list li:last-child のように、特定の親要素の中で最後の子要素を対象にすることができます。

実務でよく使われる例をいくつか挙げます。

例1: ul.menu li:last-child { color: red; } → ul.menu の中の最後の li 要素だけ赤く表示します。

例2: <span>p:last-child { font-weight: bold; } → 親要素の中で最後の p 要素だけを太字にします。

実例と表での解説

以下は実際の適用を想定したサンプルです。HTML構造とCSSがどのように組み合わさって、どの要素が対象になるかを表形式で示します。

<th>意味

セレクタ	結果の例
li:last-child	親の中で最後の li 要素を対象	最後の li が赤くなる
p:last-child	親の中で最後の p 要素を対象	最後の p が太字になる
div > span:last-child	div 直下の最後の span 要素を対象	その span の背景色が変わる

last-child の注意点と他のセレクタとの組み合わせ

注意点として、last-child は「親の中で最後の子要素」であるかどうかを判定します。親の最後の子要素があなたが狙う要素と一致しない場合、該当しません。CSSには last-of-type という別の擬似クラスもあり、こちらは同じ要素の中で最後のものを対象にします。例えば、ul の中の最後の a 要素だけを狙いたい場合は a:last-of-type を使います。

サポート状況：現在のほとんどのモダンブラウザ（Chrome、Firefox、Edge、Safari など）でサポートされています。古い環境や旧ブラウザを想定する場合は、別のセレクタと組み合わせるか、JavaScript でのフォールバックを検討してください。

まとめ

last-child は親の中で「最後の子要素」にだけスタイルを適用する強力な手段です。使い方の基本を押さえ、実例と表で確認することで、日常的なウェブデザインの細部を自然に整えることができます。使い方を理解しておくと、動的に追加・削除される要素にも対応しやすくなります。また、必要に応じて last-of-type など他の擬似クラスと組み合わせると、より柔軟なスタイリングが可能です。

補足

この話題はウェブデザインの基礎の一つです。初心者のうちは身近なリストや段落を題材に、実際に HTML と CSS を書いて試してみると理解が進みやすいです。

last-childの関連サジェスト解説

css last-child とは: cssの世界には、要素に特別な性質を付ける“擬似クラス”と呼ばれるものがあります。その中のひとつが last-child です。css last-child とは、親要素の中で“最後の子要素”にだけスタイルを適用する仕組みです。例えば、リストの最後の項目だけ色を変えたい場合に便利です。使い方はとてもシンプルで、セレクタの末尾に :last-child を追加します。例: ul > li:last-child { color: red; } この場合、ul の直下にある最後の li だけが赤くなります。別の例として、セクションの中の最後の段落だけを強調したい場合には、section p:last-child { font-weight: bold; } のように書きます。重要なポイントとして、:last-child は親の“最後の子要素”を指します。つまり、最後の子が要素であることが条件です。HTML の構造次第で、適用される要素は変わります。リストのように同じ親の下に複数の子が並ぶ場合は、最後の子要素が何であるかを見極めて使います。もし、最後の子が別の要素であるときは、目的の要素を絞るために組み合わせを工夫します。実務での注意点として、:last-child は親要素の最後の子要素にのみ適用されます。動的に要素が追加・削除されても CSS は自動で再評価されます。 last-of-type と組み合わせると、同じ親の中で特定のタグ名の最後の要素だけを対象にできます。例: ul li:last-of-type { ... } なお、ブラウザの互換性は高く、現代の主流ブラウザの多くでサポートされています。

last-childの同意語

最後の子要素: 親要素の直下にある、最後に現れる子要素を指す CSS の擬似クラス :last-child の意味を表す基本表現です。
末尾の子要素: 親要素内の末尾に位置する子要素を指す言い換えで、 :last-child と同じ意味を持ちます。
親要素の最後の子要素: ある親要素の下で最後に現れる子要素を指す言い回しです。
最終子要素: 直訳的な言い換え。親要素内の最後の子要素を対象とします。
最後の子ノード: DOM のノード階層で最後に配置された子ノードを指す表現です。
子要素の末尾: 子要素の中で末尾の位置にある要素を指す言い換えです。
末尾の子要素セレクタ: 末尾の子要素を選択するセレクタであることを示す表現です。
:last-child: CSS の擬似クラス名そのもの。親要素の中で最後の子要素を対象にします。
:last-child セレクタ: :last-child のセレクタとしての呼称の説明表現です。
last-child: 英語表記。CSS の擬似クラス名 :last-child の別表現として使われます。
ラストの子要素: 口語的な言い換え。意味は同じく、最後の子要素を指します。
親要素内の最後の子要素: 特定の親要素の中で最後に現れる子要素を指す説明的表現です。
最後に現れる子要素: 最後に出現する子要素を指す説明表現で、実務の説明で使われやすいです。
最後の子要素を選択するセレクタ: 機能を説明した表現。最後の子要素を選ぶセレクタであることを示します。

last-childの対義語・反対語

first-child: 親要素の中で最初の子要素を指す CSS 疑似クラス。適用される要素は、親の直下で最初に並ぶ子要素にマッチします。
not-last-child: 親要素の中で最後の子要素ではない要素を指す。つまり、兄弟が少なくとも1つ以上存在する場合にマッチします（:not(:last-child) の意味）。
first-of-type: 親要素の中で同じ要素タイプ（タグ）の最初の要素を指す CSS 疑似クラス。順序はタイプ内の最初を意味します。
not-last-of-type: 同じ要素タイプの中で最後の要素ではないものを指す。つまり、同じタイプの最後の子要素ではなく、それ以外をマッチします（:not(:last-of-type) の意味）。

last-childの共起語

:last-child: 親要素の直下にある最後の子要素に対して適用される CSS の疑似クラスです。
last-child: 日本語表記の呼び方。基本的には :last-child と同じ意味で、用語解説や記事内表現で使われます。
擬似クラス: CSS の機能のひとつ。要素の状態や関係に基づいて、通常のクラス指定とは別にスタイルを適用する仕組みです。
セレクタ: HTML 要素を選択してスタイルを適用する条件や表現の総称です。
CSS: Cascading Style Sheets の略。ウェブページの見た目を定義する言語です。
CSS3: CSS の新機能を取り入れた世代。 :last-child などのセレクタ機能もこの時代に普及しました。
子要素: ある要素の直下に配置されている要素のことです。
親要素: 子要素を包含する要素のことです。
直下の子要素: 親要素の直接的な子要素のことです。
last-of-type: 親要素内で同じタグ名の中で最後の要素を指す疑似クラスです。
:last-of-type: 上記の機能を表すコロン付き表記です。
:first-child: 親要素の最初の子要素にスタイルを適用する疑似クラスです。
:nth-child: 親要素内の何番目かを指定して要素を選ぶ疑似クラスです。
:nth-last-child: 親要素の最後から数えて何番目かを指定して要素を選ぶ疑似クラスです。
:only-child: 親要素が唯一の子要素である場合に適用される疑似クラスです。
DOM: Document Object Model の略。HTML 文書を木構造として表現するデータモデルです。
HTML: ウェブページの構造を記述するマークアップ言語です。
ブラウザサポート: 各ブラウザが CSS の機能や擬似クラスをどの程度サポートしているかの目安です。
セレクタの特異性: 同じ要素に複数のスタイルが適用される場合、どのセレクタが優先されるかを決めるルールのことです。
疑似セレクタ: 擬似クラスと疑似要素をまとめた総称で、 :last-child などはこの一部です。
使い方の例: 実際のコード例を示して理解を深めるコツです。例: ul > li:last-child { color: red; }

last-childの関連用語

last-child: 親要素の子要素の中で、最も後ろに配置されている要素を指す CSS の擬似クラス。直接の子要素のみを対象とし、テキストノードは除外される点に注意。
first-child: 親要素の最初の子要素にマッチする擬似クラス。表示順の先頭要素を対象にする。
nth-child: 親の子要素の中で、指定した順番（n番目）の要素にマッチする擬似クラス。n は数値、キーワード、または式で指定できる。
nth-last-child: 親の子要素の末尾から数えて n 番目の要素にマッチする擬似クラス。
only-child: 親がこの要素だけを子として持つ場合にマッチする擬似クラス。複数の子がいる場合は適用されない。
last-of-type: 親要素の同じタグ名（型）の中で、最後の要素にマッチする擬似クラス。
first-of-type: 親要素の同じタグ名の中で、最初の要素にマッチする擬似クラス。
nth-of-type: 親要素の同じタグ名の中で、n 番目の要素にマッチする擬似クラス。
not: 指定したセレクタを除外する擬似クラス。例: a:not(.active) は active でない a に適用。
擬似クラス: 要素の状態や位置を表す CSS の仕組み。last-child もこのカテゴリに含まれる。
CSSセレクタ: HTML 要素を絞り込むための記述法。属性や子要素・状態などを組み合わせて指定する。
子要素: 親要素の直下にある要素のこと。last-child などはこの関係を前提に機能する。