hodzue.jp/memo/

:has()の活用例を見てたらまさに求めていたものがあったから、さっそくサイトに実装してみた。

CSSの実装はこれでかなり進化する! Web制作者が知っておきたい、:has()疑似クラスの便利な使い方のまとめ | コリス
/* 直接のhrの兄弟があるp要素内のすべてのa要素を選択 */
p:has(+ hr) a:only-child { … }


これを参考に、直後に小見出しを持つ大見出し(伝わる?)のmargin-bottomを調整。いや〜便利だなあ。隣接セレクタを使えば直後の要素にスタイルをあてられるけど、直前の要素を触りたいときがちょこちょこあってもどかしく思ってたんだよね。
図表にfigcaptionがあるときと無いとき(←追記: これは前にも書いてたわ)、引用にciteがあるときと無いときとでスタイルを出し分けられるわけで、ちょっと考えただけでも夢が広がるよね。