見出し画像

[CSS] scroll-padding-top の設定をページごとに変える

gm_yosuke

ページごとに固定ヘッダーの高さが違うときスタイルを切り分ける便利な方法。

「要素が特定の子要素を持つ場合」を指定する疑似クラス :has を使って html{ } にプロパティを追加する。

以下は <html> の子要素 <body> のクラス属性で判別する例。
WordPress などでも応用しやすい判定方法だと思う。

[HTML]

<html>
︙
<body class="home">
// サイトのホームページならクラス名を home などお好みで。
</body>
︙
</html>

[CSS]

// クラスに home を持つ
html:has(body.home) {
	scroll-padding-top: 40px;
}

// クラスに home を持たない
html:not(:has(body.home)) {
	scroll-padding-top: 80px;
}

親要素側にプロパティを設定するコードなのでお間違いなく。
子要素の body がクラス属性の値に home を持つ html要素のプロパティ を設定している。 body要素のプロパティではない。

参考リンク

:has() - CSS: カスケーディングスタイルシート | MDN
:not() - CSS: カスケーディングスタイルシート | MDN


いいなと思ったら応援しよう！