要約

  • W3C の2018年11月の Selectors Level 4 草案は、子要素や後続の兄弟要素を手掛かりに対象を選ぶ :has() を説明したが、当時のライブ CSS 用プロファイルからは外していた。
  • 2022年5月の草案はプロファイル分けを廃止し、:has() を任意かつ検証待ちの機能とした。11月の改訂は :has() の入れ子と通常の擬似要素を引数から排除した。

ニュースサイトの編集者が一覧用カードを作る。写真付きの記事もあれば、見出しだけで勝負する記事もある。写真があるカードには余白を広げたい。CSSで写真そのものを選んで飾るのは簡単だ。外枠を「写真が入っている外枠」として選ぶには、かつて印を別に付けたり、スクリプトに調べさせたりする場面が多かった。家の中で写真が大きな顔をしているのに、玄関だけが何も知らないふりを続ける。

2018年11月21日の W3C 草案には、その玄関のための :has() が載っている。a:has(> img) は画像を直接の子に持つリンクを選ぶ。選ばれるのはリンクで、画像は条件を満たす証人だ。草案は dt:has(+ dt) も示す。次に別の定義語が続く定義語を選ぶ例である。「親セレクター」という通称では、この隣人を説明しきれない。:has() は対象を起点に、周囲との関係を調べる。

ただし2018年の規則は、証人を法廷まで連れてこなかった。草案はセレクターをライブとスナップショットの二つのプロファイルに分けた。ライブはブラウザーがその都度照合する CSS などに向き、スナップショットは静的な文書ツリーをある時点で調べる用途に向く。後者の例として querySelector() が挙がる。:has() はスナップショットに含まれ、ライブから除外された。検査役は画像の有無を尋ねられても、動き続けるスタイルシートは同じ問いを使えない。草案はこの区分について実装者の意見を求めていた。名前は付いたが、CSSの席はまだ空席だった。

2022年5月7日の草案で、席順が変わる。変更履歴はプロファイルの廃止を明記し、代わりに :has() を任意かつ「at-risk」と位置づけた。静的な問いとライブ CSS の間を遮る壁は消えた。実装するかどうかは、この草案では各実装の選択である。規則が招待状を書き直し、ブラウザーが出席を決める構図になった。

式の読み方を見れば、この機能の強さが分かる。a:has(> img) の > は直接の子だけを見る。dt:has(+ dt) の + は直後の兄弟を見る。記号を一つ取り違えると、探す家族も隣人も変わる。選択対象はコロンの前にある要素で、括弧内の相対セレクターはその要素を起点に条件を調べる。文書の中に新しい札を差し込む必要はない。すでにいる写真を確認してから、外枠の余白や色を決められる。

5月の草案には校正者泣かせの例もある。section:not(:has(h1, h2, h3, h4, h5, h6)) は見出しの子孫を持たない節を探す。section:has(:not(h1, h2, h3, h4, h5, h6)) なら、見出し以外の子孫を一つでも持つ節を探す。立派な見出しと普通の本文がある節は、後者に該当しうる。括弧の場所だけで質問がすり替わった。小さな句読点が、ページ全体の衣装係を乗っ取る。

2022年11月11日の改訂は、尋ね方の境界をはっきりさせた。:has() を :has() の中へ入れることはできない。擬似要素も原則として引数に置けない。文書は、擬似要素の中には祖先のスタイル次第で存在するものがあると説明する。祖先が、その祖先の装いによって生まれるものを手掛かりに装いを決めれば、判断が輪になる。家族会議の結論が次の家族会議を生み、その結論がまた最初を変える――そんな無限の議事録は要らない。

W3C の公開履歴を並べると、2018年と2022年の変化が見える。ブラウザーは文書ツリーの関係を判定する。サイトはどの関係に意味を持たせ、どう見せるかを選ぶ。写真付きカードが広くなるなら、読者には写真と見出しの居場所が分かりやすくなる。次の定義語が続くなら、そのまとまりを示すこともできる。外枠はようやく、家の中で起きていることに合わせて暮らせる。

子どもから便りが来た。隣の家からも一枚届いた。玄関の模様替えには十分な知らせだ。