[CSS] `:last-of-type` は使えない / `:nth-last-child` が便利

擬似クラス :last-of-type は以前からセレクタとして使えましたが、これは div や section などの特定のタグにしか適用できません。

セレクタにクラスを追加したとしても対象は大きく変わらず、
親要素内の一番最後のタグにしか適用されません。

<article>
  <header>header</header>    <!-- header:last-of-type -->

  <section>section</section>
  <section>section</section>
  <section>section</section> <!-- section:last-of-type -->

  <div class="foo">div.foo</div>
  <div class="foo">div.foo</div>
  <div class="foo">div.foo</div> <!-- 特定不可 -->

  <div>div</div>
  <div>div:last-child</div> <!-- div:last-of-type -->
</article>

上記の「特定不可」としている箇所は後続に同じ div タグが存在するため .foo:last-of-type を利用できません。
この代替策として :nth-last-child(n of .foo) が利用できます。

以下のスタイルで :nth-last-child の文字色の赤は特定不可とした箇所に適用されます。
逆に :last-of-type の緑の罫線はどこにも適用されません。

.foo {
  :nth-last-child(1 of &) { color: red }
  &:last-of-type { border: solid 1px green }
}

• デモ @ JSFiddle

:nth-last-child(n of x) の x の部分にはタグでもセレクタでも自由に指定でき、タグを指定する場合も :last-of-type と同様な使い方ができます。
また、:first-of-type も同様に :nth-child で代替できます。

Can I use... や MDN を参照する限り、ブラウザ対応も概ね問題なさそうです👌

事の発端

特定条件の最後の要素のスタイルを変更したかった事と、過去に :last-child などの記述で :last-of-type に書き換えを推奨されるケースが有った記憶で、:last-of-type への切り替えメリットが感じられず調べていた所でした。

Stylelint のワーニングかと勘違いしてましたが、どうも emotion の SSR のワーニングだったようです。

• 関連する GitHub issue

:last-of-type では要素の追加に耐えられないケースが多いと思いますが、:nth-last-child への変更は要素追加にも強く、切り替えメリットも感じます。
emotion の件は未確認ですが、もしワーニングが解消するようであれば :nth-last-child への書き換えがお勧めです。