CSSでよく「最後の要素」を指定したい場面が出てきますが、last-of-typeとlast-childは似て非なるセレクタで、それぞれ動作の仕様に基づいた制限があります。たとえば、特定のクラスを持つ最後の要素をスタイルする目的で書いたセレクタが、意図したとおりに動かないことがよくあります。本記事では、両者の仕様の違い、効かない原因とその対策を、使用例とともにわかりやすく解説します。
CSS初心者から中級者まで、根本理解に役立つ内容をしっかり網羅します。
目次
last-of-type 効かない last-child 違い：どちらを使うべきか
まずはlast-of-type 効かない last-child 違いというキーワードで検索するユーザーが気にする、どんな場面でどちらを使うかの判断基準を明らかにします。両者の基本的な違いを把握することで、意図通りにスタイルを適用できるようになります。
last-child の定義と動作
last-childは、親要素の子要素の中で「最後の子要素」、位置として最後であることを条件にマッチします。たとえば、ある
つまり「その要素は型を問わず、子の最後」であることが条件であり、タグ名で選んだものではなく、位置による指定が重要です。
last-of-type の定義と動作
last-of-typeは、親の中で「そのタグの型（tag name）」で見たときに最後の要素にマッチします。他の型が後にあっても無視されます。たとえば、親要素に
が複数あり、その後にがあっても、最後の
に:p:last-of-typeが適用されます。
「最後の同タグ」つまり型別の最後という定義になるため、タグ名ベースでの最後に限定されますが、クラスや属性での絞り込みには限界があります。
比較表：last-child vs last-of-type
| 比較項目 | last-child | last-of-type |
|---|---|---|
| マッチ対象 | どのタイプの要素でも、親の最後の子要素 | 指定したタグ名の中で最後の要素 |
| 他のタグの影響 | 影響を受ける。異なるタグが後にあると対象外 | 影響を受けない。他のタグが末尾にあっても対象タグ次第でマッチ |
| クラス条件との組み合わせ | div.last-child などで、最終子要素がその要素であればOK | .class:last-of-type のようにしても、タグ名が.typeの最後でなければマッチしない |
| 使うべき場面 | 親の最後の要素をターゲットにしたいとき | 同じタグの最後のものをスタイルしたいが、そのタグが必ず最後子ではない場合 |
last-of-type が効かない原因とその診断方法
last-of-typeが効かなくて困る場合、まずは原因を診断することが重要です。ここでは典型的な原因とチェック項目、診断方法を最新仕様に基づいて解説します。
原因1：同じタグ名の要素が親要素内に複数あり、最後が他タイプのタグである
たとえば
原因2：ラップ要素や中間要素が構造に介在している
対象の要素が直接親の子でない、またはwrapper要素が間にあるとlast-of-typeで正しく判断されないことがあります。たとえば.form-inputラッパーがdivで、最後の.form-inputのあとに別のdiv要素があると、対象の.form-inputはlast-of-typeではないと見なされます。
原因3：CSSレベル4の新しい構文を使っていない、ブラウザのサポート不足
最近の仕様では:last-of-typeだけでなく:nth-last-child(1 of .class)といった構文が登場し、特定のクラスの最後の要素を直接指定できるようになりました。しかし、この構文は一部ブラウザでしか完全にはサポートされていなかったり、最新バージョンでないと機能しない場合があります。仕様書やブラウザの互換性表をチェックしましょう｡
last-of-type と last-child を正しく使い分ける実践例と対策
具体例を見ながら、どのように書くと意図どおりに動くか、解決策を紹介します。最新仕様やブラウザのサポートを考慮した書き方も含めます。
例1：タグ名だけで最後の要素をスタイルする
例えば、
タグに赤背景をつけたい場合、以下のようになります。
p:last-of-type {background:red;}
この場合、
に適用されます。last-childではタグタイプそのものが最後である必要があり、他のタグが後にあれば対象外になります。
例2：クラスに基づいて最後の要素をスタイルしたい場合の工夫
.itemクラスを持つ最後の要素をスタイルしたいとき、.item:last-of-typeでは正しく動かないことがあります。ここで有効な代案として、CSSレベル4の構文を使って「その親で最後の .item クラス要素」を選ぶことができるようになりました。
たとえば:last-of-typeではなく:nth-last-child(1 of .item).classなどを使いますが、ブラウザの対応確認が必要です。対応しない場合はJavaScriptで最後の .item に専用クラスを追加する方法が実用的です。
例3：CSS レベル4 の of構文を使う書き方とブラウザ互換性
CSSレベル4で導入された:nth-child()や:nth-last-child()の「of」構文を使うと、クラスや属性でフィルタした最後の要素を選ぶことが可能です。たとえば:nth-last-child(1 of .item) { /* styles */ }のように書きます。この構文は、現時点で最新のブラウザで広くサポートされつつありますが、古いブラウザではまだ未サポートであるケースがあるため、フォールバックとして確認が必要です。
last-of-type 効かない事例とよくある誤解
実際に「last-of-type 効かない」と検索するユーザーが遭遇する具体的な誤解や事例を取り上げ、それらがなぜ起こるかを解説します。
誤解1：クラスを持つ最後の要素を:last-of-typeで指定できると思っている
先述のように、.class:last-of-type は「そのタグがその親内で最後になる型」であり、クラスが最後のクラス要素であることを意味しません。異なるタグが入るとマッチしなくなります。この誤解は初心者だけでなく経験者にも多く見られます。
誤解2：last-child を使えばいつでも最後の要素を選べると思っている
last-childは順番の最後、つまり親の最後の子であることが必要です。その対象要素の後に他の何らかの要素があればマッチしません。タグの種類・クラスによらず位置に依存するので、構造が変化すると期待外れになることがあります。
誤解3：ブラウザや開発ツールで動いているから本番でも動くと思っている
ローカル開発環境で最新ブラウザを使ってテストした場合、もちろん:last-of-type や level4構文が動きます。しかしユーザーのブラウザが古いバージョンや互換性の低いものだと、期待した挙動にならない可能性があります。またCSSファイルのキャッシュやセレクタの書き方（スペースや階層、擬似クラスの順序など）によっても挙動が変わることがあります。
正しく動作させるためのベストプラクティス
last-of-type や last-child を使って意図したスタイルを確実に出すためのポイントや対策をまとめます。
ベストプラクティス1：親構造をシンプルに保つ
対象要素と他の要素でタグ名が混在するような中間wrapperや余計な要素をできるだけ避けます。構造がシンプルならlast-of-type や last-child が期待通りに動きやすくなります。また必要なら親要素を明示的にdivやsectionなどでラップすることで、境界がはっきりします。
ベストプラクティス2：CSSレベル4の構文対応を確認する
of構文を用いる:nth-child(… of .class)などの構文は最新仕様であり最新ブラウザでサポートが進んでいます。書く前に対象としているブラウザを確認し、未対応の場合はフォールバックを用意するか別アプローチを検討してください。
ベストプラクティス3：フォールバックやJavaScriptによる補強
CSSだけでは限界がある場合は、最後の .item クラスを持つ要素にJavaScriptで special-class を追加する方法が実用的です。また、CSSで border や margin を調整する代わりに、CSS sibling combinator（+）を使って最後の .item の次の要素にスタイルを適用するトリックも使えます。
ベストプラクティス4：選択子のテストをしっかり行う
ブラウザの開発者ツールで構造を確認し、実際にセレクタがマッチしているかを確認してください。疑問があれば、簡易的なHTML構造を書いてlast-of-type や last-child の動きを実験すると理解が深まります。
まとめ
last-of-type と last-child は見た目が似ていても、それぞれ選ぶべき用途が異なる擬似クラスです。前者はタグ名（型）に注目して同じ型の最後、後者は位置として最後の子要素を対象とします。
もし last-of-type が効かないと感じたら、それは構造・タグ名・クラス・ブラウザの仕様などが原因である可能性があります。
最新仕様（CSS Selectors Level 4）では of構文など新しい方法も登場し、クラスベースで最後の要素を直接指定できるようになってきていますが、対応状況を確認してフォールバックを設けることが重要です。
構造を整理し、意図したセレクタを正しく書くことで、期待通りのスタイルをCSSだけで実現できるようになります。これで「last-of-type 効かない last-child 違い」に関する疑問は解消できるでしょう。
コメント