CSSで「last-of-type」と「last-child」が意図した通りに効かないことは多くの開発者が経験する悩みです。どちらも「最後の要素」をターゲットとする疑似クラスですが、その定義や働きが微妙に異なります。この記事では、last-of-typeが効かないケースの原因、last-childとの違い、さらには最新の解決策やブラウザ対応状況などを詳しく解説します。CSSセレクタに悩む人にとって役立つ内容が満載ですので、ぜひ最後までご覧ください。
last-of-type 効かない last-child 違い とは何か
まず、「last-of-type 効かない last-child 違い」が何を意味するか整理します。ユーザーがこのキーワードで検索する背景には次のような意図があります。どのようなセレクタが「最後の要素」を正しく取れるか知りたい。last-of-typeが想定通りにスタイルを適用しない理由を理解したい。last-childとはどう違うのか、具体的にどのようなケースで使い分けるかを知りたい。これらに応えるため、まず両者の定義と仕様を明確にします。
last-child の定義
「last-child」は親要素の子要素グループの中で最後の要素だけを選びます。タグの種類を問わず、最後にくる子要素そのものが対象です。たとえば、親要素に複数のタグ（たとえばや
など）が混在していて、最後がならば:last-childでそれをスタイルできます。
ただし、「その要素が本当に最後の子」でなければ効きませんので、最後に別の要素があればスタイルは適用されません。
last-of-type の定義
「last-of-type」は、親要素内で指定したタグタイプ（element type）の最後の要素を選びます。つまり同じタグ名の兄弟の中で最後のものが対象です。タグタイプが同じであれば、最後の子でなくても対象となります。たとえば複数の
タグがあり、その最後の
が他のタグに続いていても
:last-of-typeではスタイルが適用されます。
主な違いと誤解されやすい点
最も混乱を招くのは、「クラス付き要素を最後にスタイルしたい場合」です。last-childは末尾に別要素があると効かず、last-of-typeはタグ名単位で種類を判断するためクラスの有無は考慮しません。
また、どちらもクラス名による“最後のクラス要素”を選ぶ能力は持たず、そのような要件では別の方法を取る必要があります。
last-of-typeが効かない主な原因
last-of-typeを使用しているけれどもスタイルが適用されない、という人は構造の問題やタグの種類、ブラウザ対応、そして仕様の誤り理解が原因であることが多いです。ここではその原因を一つずつ具体的に見ていきます。
HTML構造に想定外のタグや要素が混在している
たとえば親要素の中に複数のタグがあるとき、last-of-typeは指定したタグタイプの最後のものを見ます。指定タグとは異なるタグが最後に来ていれば、last-childではそのタグの子は対象外になり、last-of-typeもタグタイプの最後のものが別要素に後れを取る場合には想定と異なる要素になることがあります。
このため、構造を確認して“最後にどの要素があるか”、あるタグタイプの最後がどこかを把握することが重要です。
タグ名ではなくクラスでの指定を期待しているケース
多くの人は「最後のクラス.item要素」などをtargetしたいと考えますが、last-of-typeやlast-childはタグタイプや順序に基づくため、クラス名を基準にした最後の要素を選ぶことはできません。
このようなケースでは、最近のCSS Selectors Level 4で導入された「:nth-last-child(of )」構文や、:has()を使った方法が代替策となりますが、ブラウザ対応が完全ではない点に注意が必要です。
CSSの指定方法やセレクタの書き方のミス
セレクタが間違っていたり、子孫セレクタと直系子セレクタの違いを理解していなかったりすることで期待通り効かないことがあります。たとえば
さらに、display: noneで非表示になっている要素やpseudo要素、コメントノードなどが影響する場合もあり、見た目だけでなくDOM構造を検証することが肝心です。
ブラウザのサポートや最新仕様とのギャップ
:nth-last-child(of )など新しい構文は最新ブラウザではサポートが進んでいますが、古いバージョンでは使えないことがあります。また、:has()なども比較的新しい機能で、全ブラウザで一律に有効というわけではありません。
そのため、対応ブラウザを確認しつつ、フォールバック（代替手段）を用意しておくことが実践的です。
last-child と last-of-type の比較と使い分け
両者の動きがどう異なるかを比較表で整理します。どちらを使うべきか判断する際のガイドとなるように、構造や目的別に違いを簡潔に見ていきます。
| 比較項目 | last-child | last-of-type |
|---|---|---|
| 対象の要素 | 親の最後の子要素、タグ種類を問わない | 親の中の特定タグタイプの最後の要素 |
| 他タグの影響 | 最後に他タグがあると対象にならない | 他タグがあっても影響せず選ばれることもある |
| クラス指定での最後の要素 | 不可（タグと順序） | 不可（タグタイプのみ） |
| 使いどころ | 最後の子全体の余白調整など | 同じタグの最後だけをスタイルしたいとき |
具体例での動きの違い
例えば次のような構造を考えます。親に
, ,
の順に要素があり、最後が。この場合、
:last-childは効きませんが、
:last-of-typeは2番目の
が対象となります。
逆に、親の最後が
であれば両方が同じ要素を指します。なので構造によってはどちらを使うかで結果が大きく変わります。
パフォーマンスと読みやすさの観点
last-childやlast-of-typeはどちらもシンプルな疑似クラスであり、パフォーマンスへの影響は小さいです。一方で、複雑な疑似クラス（:nth-last-child(of クラス)や:has()など）はCSSの解析コストやブラウザの最適化に影響することもあります。
可読性やメンテナンス性を考えると、構造が安定しているならsimpleな疑似クラスを使い、複雑になる場合のみ最新構文を検討するのが良いでしょう。
クラス指定で最後の要素を選びたい場合の解決策
タグ名ではなくクラスで最後の要素をスタイルしたい場面は非常に多くあります。最新仕様や代替手段を使えばその要件を満たせます。以下に複数の方法を紹介します。
:nth-last-child(of クラス) を使う方法
CSS Selectors Level 4で導入された構文として「:nth-last-child(of )」があります。これを使うと親要素の全子要素のうち、指定したクラスを持つ要素をフィルタリングし、最後のものを選べます。例えば「.item:nth-last-child(1 of .item)」のように書きます。
ブラウザの最新バージョンではこの構文がサポートされつつあり、多くの環境で動くようになっています。ただし古いブラウザでは無効なのでフォールバックを用意する必要があります。
:has() 疑似クラスを活用する方法
:has() 疑似クラスを使うと、要素の後に同じクラスの要素が存在しないことを条件にスタイルを適用する、といった構造も可能になります。たとえば「.item:not(:has(~ .item))」などで最後の.itemを選ぶことができます。
この方法は直感的で柔軟ですが、古いブラウザや非対応環境では効かないことがあるため、プロジェクトのターゲットブラウザでの動作確認が不可欠です。
JavaScriptを使うフォールバック手段
CSSだけでは対応できないケースではJavaScriptでDOMを操作して最後のクラス付き要素を特定し、クラスを追加してスタイルする方法が確実です。ページ読み込み後やDOM変化時に対象要素を取得し、「last」クラスなどを付けるスクリプトを用意すると良いでしょう。
この方法はどのブラウザでも動作が保証され、レガシー対応や動的生成された要素がある場合に特に有効です。
最新仕様とブラウザ対応状況
CSSセレクタに関しても仕様が進化しており、「of クラス」「:has()」などが注目されています。最新仕様を踏まえて環境に応じた使い分けを知ることが重要です。
Selectors Level 4 での新機能
Selectors Level 4 では、「:nth-last-child(of )」や「:nth-child(of )」などの“of 句”が導入され、クラスや属性など任意の条件でフィルタリングして順番を指定できるようになりました。
これにより「最後のクラス.item要素」のような要件が純粋なCSSで解決可能となります。
ブラウザ対応状況
最近の主要ブラウザは、多くこの「of 句」をサポートするようになってきています。Chrome、Firefox、Operaなどの最新版では使用可能なケースが増えています。ただしIEや旧バージョンのEdge、古いSafariなどでは未対応であることがあります。
また、:has()も最新環境で“ベースラインサポート”が成立しつつありますが、全ての疑似クラスと組み合わせて使えるわけではないため、機能サポートをチェックする必要があります。
対応の判断とフォールバックの設計
プロジェクトでターゲットとしているブラウザの一覧を作り、新仕様が使えるかどうかを事前に確認します。サポートされていなければ旧来の方法（JS併用やマークアップの変更など）を併用します。
また、@supportsを使って条件付きでCSSを適用する方法で、未対応環境では別のルールを適用するという実装も有効です。
よくある具体的なケースと対処例
実際に開発現場で“last-of-type 効かない”と感じるパターンと、その対処例を用途別に紹介します。構造の例とコード例で理解を深めてください。
リストアイテムの最後の”li.item”だけ余白を取りたい
HTML例では
- 内に
- が複数あり、その後別の
- や別の要素が続く構造があるケースを考えます。
この場合、li.item:last-childやli.item:last-of-typeは動きが期待と異なることがあります。### 対処例
CSSでは次のように書けます。実際のCSS例:
.item:nth-last-child(1 of .item){ margin-bottom:0; }
これによりその親要素の中で最後の.itemを正しくスタイルできます。ブラウザがこの構文をサポートしていない場合はJSで最後の.itemに独自クラスを付与して対処します。
段落の最後のタグのスタイルをpに限定したい場合
親要素内で最後に来る要素がpとは限らないが、pタグの最後のものだけを特定してスタイルを適用したい場合があります。
このケースでは:last-of-typeを使えばpタグの最後のものが対象になります。他のタグ（たとえば
や）が後にあっても影響されません。複数種類の同一タグが混在するフォームフィールド等での例
同じタグだがtype属性やclass属性が異なる複数がある構造では、last-of-typeはタグ名のみなので区別できないケースがあります。
このような場合はinput[type=…]セレクタを併用する、もしくは:last-childなどの順序によるターゲティング、あるいは最近の“of クラス”構文やJSを用いて最後の対象を判定する解決策が選択肢になります。まとめ
last-of-typeとlast-childは見た目は似ていても、動作の定義が異なるため、意図したスタイルが効かない原因を正確に把握することが肝要です。タグタイプだけを見て最後のものを選ぶか、親要素の最後の子を選ぶかによって結果が変わります。
また、「クラス付き要素の最後」をスタイルしたい場合、最新のSelectors Level 4のof構文や:has()を活用することでCSSだけで実現可能なケースが増えてきています。とはいえ、ブラウザの対応状況を確認し、フォールバック手段としてJavaScriptなどを併用するのが安心です。
構造がシンプルであればlast-childやlast-of-typeで十分ですが、クラスや属性のフィルタリングが絡むときは新しい構文を検討する価値があります。CSSの仕様を正しく理解し、目的に応じて使い分けることでスタイルの制御力が大きく向上します。
コメント