CSS :has() を使ってフィルターを自作してみる

Microsoft Edge 105 より、CSS の :has() がサポートされ、Edge でも CSS だけである程度のフィルターを作成する事が可能になりました。
他のブラウザでも、:has() をサポートしており、CSS を適用する環境が有れば同じ様に作成する事が出来ます。
今回は CSS を適用する為にユーザースタイルシートを適用する拡張機能を自作し、これに :has() を使用したフィルターを記述していきます。

:has() の使い方

<div class="level-1">
  <div class="level-2">
    <a href="example.com">リンクページ</a>
  </div>
</div>

class level-2 または a 要素を含む class level-1 に CSS を適用するには、

.level-1:has(>.level-2)

又は

.level-1:has(a)

の様に記述出来ます。
:has() は直下の要素や孫要素の属性の値をターゲットに取れる為、これを利用してフィルターを作成します。

フィルターの作成

Google 検索結果から URL に「google」を含むページを非表示にするには、

.g:has([href*="google"]){
  display: none !important
}

Twitter 検索からハッシュタグに「フォロー」を含むツイートを非表示にするには、

article:has([href*="フォロー"]){
  display: none !important
}

複数の対象を非表示に指定する場合、例えば Google 検索から URL に「google」又は「microsoft」を含むページを非表示にするには、

.g:has(:is([href*="google"],[href*="microsoft"])){
  display: none !important
}

の様に、:is() を使ってカンマ区切りで複数指定が出来ます。
又、クラス名や構造は変更される可能性が有るので、表示が崩れた時は開発者ツール等でソースを確認し修正する必要が有ります。