クラス名ベースで:last-of-typeを利かせる方法はないでしょうか

Question

CSSの:last-of-typeが効かない

下記のソースコードで、赤3だけを赤色にしたいのですが、
この記述だと、CSSが当たってくれません。

HTML

<div class="text">
	<p>赤1</p>
</div>
<div class="text">
	<p>赤2</p>
</div>
<div class="text">
	<p>赤3</p>
</div>
<div class="obstacle">
	<p>邪魔</p>
</div>

CSS

/*赤にならない！*/
.text:last-of-type{
	color: red;
}

なぜ効かないのか

https://takuo4649design.com/weblog/note/archives/14921
このページが詳しく説明してくれているのですが、仕様上この記述だと当たらないようです。

何か良い書き方はないでしょうか

この場合HTMLのマークアップを変えて、obstacleを外に出してあげればCSSの記述が効くようになるのですが、HTMLのソースコードをいじらずにCSSの記述だけで赤3の色だけ変更する方法はないでしょうか。

Comments

[Yamato546]

今の所cssだけで全ブラウザに対応させる方法はない、htmlの構造が良くない、と答えが出ているのに解決済みにされないんですか？

[nyoro]

有益な回答をしてくださる方が沢山いらっしゃるので、まだ未知の情報を提供してくれる可能性があると思い、解決済みにしていません。始めたばかりで勝手が分からないものですみません…。

Answer 1

:last-of-type

:last-of-type に行き着いたのなら、あなたが必要としているのは type ではなく、class
:last-of-type ではなく、:last-of-class を導き出せます。
→ありません。

:nth-last-child()

• 13.3.2. :nth-last-child() 疑似クラス - Selectors Level 4 （日本語訳）

疑似クラス記法 :nth-last-child(An+B [of S]? ) は、各 同胞群ごとに，その中で［ 選択子リスト S に合致するもの ］のうち，最後から A×n + B 個目（ n ≥ 0 ）の要素を表現する。 of S が省略された場合の既定の S は、 | になる。

:nth-last-child(1 of .text)

• Can I use... Support tables for HTML5, CSS3, etc
• :nth-last-child() - CSS: Cascading Style Sheets | MDN

※2019/8/23 現在の実装は「Safari 9」「iOS Safari 9」のみ

Re: nerd さん

Comments

[takopo]

こんなのできるんですね、勉強になりました。

[nyoro]

すごいです！こんな方法があったんですね！
でもSafariでしか効かないと実務では使えないですね。。笑

[think49]

> でもSafariでしか効かないと実務では使えないですね。。笑
はい。
クロスブラウザを考慮すると、現在の実装でもCSSを適用可能なように、マークアップ(HTML)を変える必要があります。

Answer 2

＞ .text:last-of-type{

は、すべてのタグのウチ最後のものがtextクラスなら・・・
という意味合いなので無理です

素直にjs(jQuery)で処理するのをおすすめします

Answer 3

:last-of-typeは「最後のだけ適用するで」って言うクラスなので最後以外のものには適用できません。
:nth-last-of-type(n)は最後からn番目のやつだけ適用するものです。
例えば最後から2番目だと:nth-last-of-type(2)と指定します。

Comments

[kyoya0819]

失敬。:nth-last-of-type あまり対応してませんでした。
:nth-last-childだったら対応してるかな？

Answer 4

解決のための回答にはなっていないのですが、
自分がいつもコーディングしているときは、同じ用途のコンポーネントをまとめる用の入れ物を作って、その中にまとめるようにしています。
例えばご質問の場合でしたら、text をまとめる用の wrap-text みたいな入れ物を作って、text 以外のものは入れないようにします。

<div class="wrap-text">
    <div class="text">
        <p>赤1</p>
    </div>
    <div class="text">
        <p>赤2</p>
    </div>
    <div class="text">
        <p>赤3</p>
    </div>
</div>

<div class="obstacle">
    <p>邪魔</p>
</div>

こうすることで、3列にしたいとか、偶数だけ変更したいというときに css で柔軟に変更できますし、コンポーネントを分離・拡張しやすいというのは運用面で見てもメリットがあります。
また見通しが良くなる分ミスが減りやすくなるのでおすすめです。