Heading pseudo-classes | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

概要

:heading疑似クラスはh1〜h6のすべての見出し要素にマッチし、:heading()関数型疑似クラスでは特定のレベルを指定できます。複数の見出しセレクターをまとめて記述する煩雑さを解消し、スタイルシートの可読性を向上させます。見出しのスタイリングルールを簡潔に記述できる新しいセレクターです。

Chrome 未対応

Edge 未対応

Safari 未対応

Firefox 未対応

CSS

:heading {
  font-family: 'Noto Sans JP', sans-serif;
}
:heading(1, 2) {
  color: #333;
  border-bottom: 2px solid currentColor;
}