この記事を書いた人
中嶋悟
名前：中嶋 悟（なかじま さとる）
ニックネーム：サトルン
年齢：28歳
性別：男性
職業：会社員（IT系メーカー・マーケティング部門）
通勤場所：東京都千代田区・本社オフィス
通勤時間：片道約45分（電車＋徒歩）
居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション
出身地：神奈川県横浜市
身長：175cm
血液型：A型
誕生日：1997年5月12日
趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中）
性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ
1日（平日）のタイムスケジュール
6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック
7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理
8:00 出勤準備
8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット）
9:15 出社。午前は資料作成やメール返信
12:00 ランチはオフィス近くの定食屋かカフェ
13:00 午後は会議やマーケティング企画立案、データ分析
18:00 退社
19:00 帰宅途中にスーパー寄って買い物
19:30 夕食＆YouTubeやNetflixでリラックスタイム
21:00 ブログ執筆や写真編集、次の記事の構成作成
23:00 読書（比較記事のネタ探しも兼ねる）
23:45 就寝準備
24:00 就寝
はじめに：last-childとnth-last-childの違いを理解する
このセクションでは、まず両方の疑似クラスの基本を整理します。最後まで読めば、どちらを使えばよいか直感で判断できるようになります。まず大事な点は「数え方」と「適用のタイミング」です。:last-child は親要素の子要素の中で“最後の要素”にだけスタイルを適用します。これは要素の種類を問わず、最後の子が誰であっても適用されます。たとえば<ul>の中で最後の<li>だけ色を変えたい場合に適しています。反対に :nth-last-child(n) は「末尾から数えた位置」が条件です。n に 1 を入れれば:last-child と同じ意味になり、n に 2 や 3 を入れれば末尾から 2 番目、3 番目の要素にスタイルが適用されます。このとき数えの基準は「親のすべての子要素」なので、途中にテキストノードやコメントは数えません。
つまり、最後の要素を特定するか、末尾から数えて特定の位置を特定するかの違いです。これだけを覚えておけば、後の実践で迷いにくくなります。
この違いを押さえると、リストの最後のアイテムを目立たせたいときと、末尾から数えて特定の位置のアイテムだけを特殊化したいときの使い分けが見えてきます。ここからは実例を交え、どう使い分けるべきかを丁寧に解説します。さらに、よくある誤解と落とし穴についても触れます。読みやすさを第一に、例を自分のプロジェクトに合わせて読み替えられるよう、基本の形をしっかり覚えましょう。
また、以下の小さなコツも役に立ちます。「対象の親要素が何個子要素を持つのかを事前に数えることは難しい場合があります」。その場合は疑似クラスの使い方を組み合わせて、より堅牢なスタイル設計を目指すことが大切です。
違いを整理する4つのポイント
ここでは「数え方」「適用範囲」「動的な変化への対応」「実務での使い分け」の4点に絞って整理します。まず 数え方は常に親要素の子要素を対象にします。:last-child は「親の最後の子要素」にのみ適用され、要素の型は問われません。一方、:nth-last-child(n) は末尾から数えて n 番目の要素に適用されます。どちらもテキストノードやコメントはカウントされず、要素ノードだけが対象になります。次に適用範囲ですが、:last-child は「最後の子要素」が条件を満たすときのみ適用され、:nth-last-child(n) は n の値次第で該当しない場合があります。最後に動的な変化への対応です。リストのアイテムが増減する場合、:nth-last-child(n) は末尾から数える位置が変わるため、静的なクラス指定よりも柔軟性が高い反面、常に意図通りかを確認する必要があります。これらを踏まえて、次のセクションでは具体的な使い分けを見ていきましょう。
実務での使い分けと具体例
実務では、まず「末尾の要素を目立たせたい」ケースと「末尾から数えて特定の位置を強調したい」ケースを分けて考えると分かりやすいです。
例1: リストの最後のアイテムを赤色にする。
コード例1:
ul > li:last-child { color: red; }
この指定は、リストが何個あっても最後のアイテムだけを対象にします。リストの長さが動的に変わっても、最後のアイテムだけがスタイルを受けるので、HTML の変更を最小限に抑えられます。
例2: 末尾から2番目のアイテムを強調する。
コード例2:
ul > li:nth-last-child(2) { font-weight: bold; background: #f0f0f0; }
このように、:nth-last-child(n) は末尾から数えて特定の位置を指定するのに便利です。n が 1 だと :last-child と同じ意味になり、n が 2 以上だと末尾から順に位置を指します。ただし、対象の要素数が想定より少ない場合は適用されないこともあるため、条件の組み合わせや fall-back を用意しておくとよいです。
実務上は、以下のように「セレクタを組み合わせる」ことで堅牢性を高めるのが一般的です。
- 親要素にクラスを付けて絞り込む。ul.special > li:last-child など。
- 他のセレクタと組み合わせる。例えば :not(:first-child) など、他の条件と組み合わせて複雑なケースを扱う。
- 動的なリストには ::marker など別の方法と併用する。見た目の統一性を保つ工夫を忘れずに。
表を使って簡単に比較しておくと、実務での混乱を避けられます。下の表は、どの状況でどちらを使うべきかを一目で示す参考表です。
able>セレクタ | 意味 | 使い方の例 | last-child | 親の最後の子要素に適用 | ul > li:last-child { color: red; } | nth-last-child(n) | 末尾から数えて n 番目の要素に適用 | ul > li:nth-last-child(2) { font-weight: bold; } | ble>この表を見れば、適用タイミングと対象が一目で分かります。必要に応じて、複数のセレクタを組み合わせて「より安定したデザイン」を目指しましょう。
注意点と使い分けのコツ
実務で迷う場面は、親要素が複数の子要素を持つときに多く生まれます。このときは末尾から数える視点を持つことが大事です。また、:nth-last-child(n) は a*n+b の形で書けることがあり、偶数・奇数を指定するなどの高度な使い方が可能です。とはいえ、読みやすさと保守性を優先するなら、複雑さを避け、最短の形で運用するのが安全です。HTML の構造変更が頻繁にあるプロジェクトでは、親要素にクラス名を付けて絞り込みを行うと、将来的な変更にも耐えやすくなります。最後に、実際に手元の環境でテストして確認する癖をつけることが重要です。テストは小さなサンプルを用意して、期待通りの挙動になるかを確かめるとよいでしょう。
まとめ：使い分けのコツを押さえると作業が楽になる
まとめとしては、「最後の1つだけを対象にするなら last-child、末尾から数えて任意の位置を対象にするなら nth-last-child(n)」という基本形を覚えることです。リストやカードのデザイン、ダッシュボードの末尾パネルなど、要素の数が変動する場面で特に強力です。実務では、他の CSS セレクタと組み合わせることで、より堅牢で拡張性の高い設計が可能になります。ここまでの知識を元に、あなたのプロジェクトに最適な使い方を見つけてください。
ピックアップ解説この前、ウェブページのデザインをいじっていたとき、last-child と nth-last-child の挙動が思ったより違って混乱しました。最初は「最後の要素だけスタイルがつくのは分かるけど、末尾から2番目はいつ適用されるの？」と悩みました。実は nth-last-child は「親の全ての子要素を対象として末尾から数える」仕組みなので、リストが動的に増減しても、常に末尾から数えた位置を指定できる点が強みです。一方、last-child は最もシンプルで、末尾の要素を固定的に指定するだけ。使い分けのコツは、要素の数が変動する箇所には nth-last-child(n) を使い、単に“最後の一つ”を強調したいときには last-child を使うことです。こうした直感的な感覚をつかむと、コードの保守性が上がり、他の人との協業もスムーズになります。例えば、動的に追加されるリストの最後のアイテムだけを赤くしたいとき、last-child だけで済む場面と、末尾から数えて特定の位置だけを色付けしたい場面で、同じリストでも使い分けを変えると表現力が広がります。さらに、親要素にクラスを付けて絞り込みをする癖をつけると、将来の拡張にも対応しやすくなります。結局のところ、CSS は「どこまで厳密に指定するか」という設計の問題。使い分けを覚えると、デザインの自由度と保守性の両方を手に入れられます。
ITの人気記事
885viws
785viws
670viws
458viws
422viws
419viws
357viws
352viws
337viws
310viws
306viws
295viws
293viws
279viws
272viws
262viws
254viws
253viws
249viws
248viws
新着記事
ITの関連記事
