【メモ】last-of-type が効かない場合の解決法

特定要素の最後だけに設定がしたい。
div や section が並んでいる中で、並んでいる特定のclassの最後にだけ設定を追加する方法です。

例：

<main>
  <section class="A">あああ</section>
  <section class="B">いいい</section>
  <section class="B">いいい</section>
  <section class="B">いいい</section>
  <section class="C">ううう</section>
</main>

のように、setionが並んでいて、各sectionには margin-bottom:60px; を付けています。
しかし、section:B が連続する場合には、最後の B だけに margin を付けたくなります。（なりました）
そこで...

:last-child

.B:last-child {
  margin-bottom:60px;
}

はい。これでは無理ですね。さすがに私でも知っています。
では次は...

:last-of-type

main section.B:last-of-type {
  margin-bottom:60px;
}

実はちょっと期待しましたが、これは意味が違うので無理だということが分かりました。

（誤）並んだ section の中の 最後の B
と思ってしまいましたが...
（正）並んだ section の最後のclassが B だった場合
だったのですね。。。
これはこれで、別の場所で使えそうなので覚えておきます。

隣接設定

次に登場したのが隣接設定でした。
早速試してみると、割とそれっぽくなりました。

main .B + .B {
  margin-bottom:60px;
}

割といい感じ？と思いましたが、2番目と3番目に margin が付いてしまいます。
そりゃそうですよね。。。

いよいよ手詰まりかと思いましたが、少し視点を変えてみました。
　

隣接設定を次の要素に

つまり、
.B に設定を付けるのが無理ならば、次に来る要素に設定を付けて代用すればいい！
です。

main .B + not(.B) {
  margin-top:60px;
}

こうすると、
.B には margin-bottom は付かず、
.B の次に来る要素が .B ではなかった場合、その要素に margin-top が付きます。
（この場合は C に margin-top が付く）
これなら次にくる要素が B 以外なら margin-top が付いてくれるので、見た目は同じになります。

以上になります。
まぁ、そこそこ力技な気もしますが、体裁は同じになりますので良しとしました。

■補足

CMSなどで、下の要素がある場合とない場合が発生するぞ！
という場合には、先ほど覚えておいた last-of-type を併用します。

main .B + not(.B) {
  margin-top:60px;
}
main .B:last-of-type {
  margin-bottom: 60px;
}

こうすることで、最後の要素が B になった場合でも対応できます。