nth-of-typeが適用できない

Question

実現したいこと

以下のcccにcssを適用したい

前提

内容によりクラスを適用したい箇所が変動するため、特定のクラスにのみcssを適用したい

発生している問題・エラーメッセージ

特に無し

該当のソースコード

<div class="wrapper">
    <div>aaa</div>
    <div class="test">bbb</div>
    <div class="test">ccc</div>
    <div>ddd</div>
</div>

<style>
.wrapper .test:last-of-type {
    color: blue;
}
</style>

試したこと

順序を変えたりnth-childなどを試したが駄目だった

補足情報（FW/ツールのバージョンなど）

特に無し

Answer 1

:nth-child(n) は「兄弟要素の中のn番目か」を指定するもので、:last-of-type「兄弟要素のグループの中でその種類の最後の要素」を指定するものなので、そのままの記載方法では「クラスの中の最後」を表すことが出来ません。

:nth-last-child(1 of .test) なら希望の指定になると思います。
（ブラウザのバージョンが古いと対応していない可能性もあります）
動くサンプル： https://jsfiddle.net/3q2j5fr6/

---

【:nth-child() - CSS: Cascading Style Sheets | MDN】
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

【"nth-child of" | Can I use... Support tables for HTML5, CSS3, etc】
https://caniuse.com/?search=nth-child%20of

【要素の指定にもう迷わない？:nth-child()のofフィルターを使ったラクラク要素指定法 | フロントエンドBlog | ミツエーリンクス】
https://www.mitsue.co.jp/knowledge/blog/frontend/202008/27_1110.html

Comments

[my4mu9rb6c]

できました、ありがとうございます。