last-of-typeが効かないのはなぜ？last-childとの違いと正しい使い方を解説

「last-of-type 効かない last-child 違い」というキーワードで検索してこの記事にたどり着いたあなたは、おそらくCSSで要素を選択しようとして挫折した経験があるのではないでしょうか。last-of-typeが意図したように動かない、またlast-childとの違いが理解できないといった悩みを持つ人は非常に多いです。この記事では、その原因、具体的な違い、最新の対応策、よくあるミスとその解決方法をプロの視点から詳しく解説します。これを読めば、もう迷うことなく正しいセレクタを選べるようになります。

last-of-type 効かない last-child 違いとは何か

CSSにおけるlast-childとlast-of-typeは、似ているようで大きく異なる「構造的疑似クラス」です。どちらも兄弟要素の中での「最後」の要素を対象にしますが、その「最後」の定義が異なります。last-childは親要素の中で最後の子要素という位置だけを見ます。一方、last-of-typeは同じタグ（要素の種類）を持つ兄弟要素の中で最後のものを対象とします。要素が最後の子であっても、他の種類の要素が後ろに続いていればlast-childは効きませんが、last-of-typeはそのタグが最後であれば効きます。

実際に、タグの種類が混在していたりクラス付き要素であったりすると、last-of-typeをクラスと組み合わせた時に期待した結果にならないことがあります。たとえば、同一タグの要素が複数ありその最後尾が別のクラスを持つ要素である場合、.class:last-of-typeは「最後のそのタグでクラス付きである要素」ではなく「最後のタグがそのクラスを持つ場合のみ」のマッチになるので、誤解から「効かない」と感じることがあります。その違いが理解できれば、どちらを使うべきか迷わなくなります。

last-childの定義と注意点

last-childは親要素の最後の子ノードとしての位置だけを判断します。つまり、任意の種類の要素が最後にあればそれがlast-childになります。タグ名もクラスも関係ありません。親の最後の子でなければ対象にならないため、最後尾に別の種類のタグやテキストノード、コメントがあれば期待した要素がlast-childとして選ばれません。

さらに、.someClass:last-childと書くと、その親の最後の子でありさらにクラスがsomeClassである要素だけが対象です。最後の子が別のクラスやタグであれば、一致する要素がなく、効かないように見えます。つまりlast-childは「最後」＋「その要素自身」の両方の条件を厳しく見る選び方です。

last-of-typeの定義と注意点

last-of-typeはタグの種類（element type）を基準に、同じ種類の兄弟要素の中で最後に現れるものを選びます。クラスは直接関係しません。たとえば複数の

要素があり、その後に別のタグが何個かあっても、最後の

要素がlast-of-typeで選ばれます。

ただし、.someClass:last-of-typeのようにクラスを加えた場合、タグ種別が先に見られるため、同じタグ種別の別クラスの要素が後ろにあれば、そのクラス付き要素はlast-of-typeには選ばれません。つまり、同じタグでより後に存在する要素が別のクラスでも、そのタグの最後のものがlast-of-typeになるのです。

last-childとlast-of-typeが効かないと感じる典型的ケース

以下のような状況で「last-of-type 効かない」とか「last-childではないはずなのにスタイルが適用されない」と感じることが多いです。

• 対象要素と同じタグの別の兄弟要素が後に存在するため、last-of-typeが期待通りではない
• last-childを書いた式だが、対象要素の後にテキストノードやコメント、空白行があり、それが最後の子とみなされてしまう
• last-childでクラス指定したが最後の要素が別のクラスだったため、selectionが一致しない
• CSSの優先順位や他のスタイルが上書きしてしまい、スタイルが見えない

last-of-type 効かない の具体的な原因と対策

last-of-typeが「効かない」に見える原因は様々ですが、その原因を理解して対策すれば正しく動作させることができます。ここでは最新情報を元にチェックすべきポイントを整理します。

原因1：タグ種別の混在

対象の要素と同じタグ名で、後に別のクラスまたは属性の要素が存在している場合、その要素がlast-of-typeとして選ばれてしまうため、クラス付き要素にはスタイルが適用されません。たとえば、複数の<div>の中で最後のdivが全く別クラスであるとき、.myClass:last-of-typeではmyClass付きの最後のdivは選ばれないことがあります。

対策としては、タグを別に分けるか、構造を整理する方法があります。あるいは、タグ種別を限定しない別の疑似クラスを使うか、JavaScriptで最後のクラス要素を動的に選ぶ方法を検討してください。

原因2：テキストノードやコメントなどが最後尾にある

HTMLの最後尾が空白、改行、コメント、テキストノードだった場合、それがlast-childとみなされます。そのため、対象要素が本来の最後尾でもlast-childではないことになることがあります。

# 対策として、HTMLの構造を確認し、必要であれば余分な改行・コメントを削除するか、対象の親要素の中で最後の子が本当に対象要素となるよう整理しましょう。

原因3：優先順位（specificity）の問題や他のスタイルの上書き

CSSではセレクタの優先順位が高いものや後に記述されたものがスタイルを上書きします。:last-child や :last-of-type などの疑似クラスは、クラスセレクタやIDセレクタ、!importantなどに比べると低い優先度になることがあります。

たとえば、.myClass:last-child で設定したスタイルが、別の .myClass や親孫セレクタなどのスタイルに上書きされて表示されないことがあります。CSSの構造を見直し、セレクタの優先度や読み込む順序を調整することが重要です。

原因4：対象ブラウザによるサポートの違い

:last-child と :last-of-type はCSS Selectors Module 3で定義されており、現在主流のブラウザでは広くサポートされています。Internet Explorerの古いバージョンではサポートが不完全なことがありましたが、現在利用されているIE9以降、Edge、Chrome、Firefox、Safariなどでは問題なく動作することが確認されています。

もし古いブラウザで動作確認をする必要があるなら、代替手段を用意するか、JavaScriptでフォールバックを実装することが安全です。

last-child 違い を理解して用途に応じて使い分ける

last-childとlast-of-typeの違いを理解すれば、どの状況でどちらを使うべきかが明確になります。ここでは使用場面ごとの選び方を中心に解説します。

いつ last-child を使うべきか

親要素の最後の子であるかどうかをチェックしたい場合、本当にその要素が最後の子であるとHTML構造が条件を満たしている場合に使います。例えばリストの最後の

<div class="container">
  <p class="intro">導入文</p>
  <p class="target">これは対象の段落です</p>
  <span>注釈がここにあります</span>
</div>

.container .item:nth-last-child(1 of .item) {
  /* スタイル定義 */
}