CSS : has (親セレクタ)👪

:has() is essentially the long-awaited parent selector in CSS 🎊

Don’t say Safari is always last. Sometimes we are first.

しかし、この時間の“サファリ第一”を祝う前に、あなたはまだ2022年にはまだ親セレクタをテストするブラウザを持っていない可能性があります知っている.サファリ更新現在.

CSSからの"行方不明"
現在、親セレクタはもはやCSSからなくなっています.そして、Firefoxとクロムが速く続くことを望みましょう.


「親セレクタ」は何を選びますか?
親セレクタは親要素を選択します.彼らは実際に祖父母と任意の一致する祖先を選択します.
私はたった1つの考えていない:has() 「子セレクタ」として、誤解を避けるために「セレクタを持っている」と呼ぶべきですか?
それは私に適切な説明のように聞こえる.
からcaniuse.com/css-has :

For example, a:has(>img) selects all <a> elements that contain an <img> child.

The :has() CSS pseudo-class is documented well on MDN .

性能考察
実装するのに長い時間がかかる主な理由は高価な計算の恐れです.親セレクタは、リアルタイムでドキュメントに適用されると、サイトの速度とパフォーマンスを傷つけることができる機能です.
Chris Coyier cited Jonathan Snook (back in 2010) 「要素が動的にページから削除され、削除されると、ドキュメント全体が再描画されなければならない(主なメモリ使用状況).
おそらく、我々はおそらく我々が実際に親セレクタを使用して起動するときに我々のパフォーマンスを測定するために慎重にする必要がありますか?

パフォーマンスの問題を回避する実装
更新:パフォーマンスの問題はおそらく解決されている.エリックマイヤーは、実装がパフォーマンス問題をどう扱うかについて、オタクの詳細についての話をしました.
後に、ブリンクエンジンの戦略が何らかの動きのあらゆる可能な組合せのあらゆる可能な結果を予測する代わりに速く無関係の動きを無視する方法を理解しなければならないチェスエンジンの効率に類似していると言います.
CSSの場合には、点滅エンジンは、関連性の高い要素のウォークアップと無効化を防ぎます.スタイルを適用した後の無関係な再計算を減らすために、スタイルがAによって影響を受けるならば、エンジンはマークすることができます:has() 再循環中の状態変化
しかし、Byungwooリーは、親セレクタを実装する問題と解決策の詳細を説明しましょう.
彼の説明には複雑なユースケースが含まれている.a:has(.b ~ .c)or .a:is(:has(b), :has(c))すごい!私は、それが有効なCSSでありえたということさえ知りませんでした.
決して学習を停止!しかし、コードレビューで私にそのようなコードをまだ示さないでください.私はおそらく、それを理解し、人間の脳のために維持しやすいものにリファクタを要求する!

実例
私は多くの人々がどのように使用してセレクタを持っている例を考案する苦労を参照してください:ラッキーあなた!
ここでは、実際の世界の例です:私はすでに修正されていた前にhotfixされているショップウェアのテーマを修正しなければならなかった!important , したがって、少なくともロードマップのその部分でクリーンコードはありません.
私は、私が使用できたことを願います:has() ここで、誤ってCMS生成マークアップの間違った要素をターゲットにするリスクを下げる.セレクタはとても長いので、すべてを参照してスクロールする必要があります!

/* override template heading style */
body.is-act-index .cms-sections .col-12 .cms-element-alignment.align-self-start {

使用has 少なくともちょっとはっきりしています.

/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {

読みやすさのためにそのコードを書きたいかもしれません.しかし、我々はブラウザのサポートを確保する必要があります.

どのようにポリフィル:hs ()セレクタ?
最近のCSS構文で親セレクタを回避する方法はありません.…を望まないPostCSS or SASS ! 今回はJavaScriptを以前のブラウザに塗ります.
「jQueryには、基本的に永遠に以来、その兵器庫にセレクタがありました」.Eric Ponto wrote in 2015 already jQueryに基づくポリフィルの表示

Polyfill({
    selectors: [":has"]
}).doMatched(rules => {
    rules.each(rule => {
        // just pass it into jQuery since it supports `:has`
        $(rule.getSelectors()).css(rule.getDeclaration())
    });
});

クイズ:JQueryを使用せずにPolyfillへの方法
クイズを取り、あなたのバニラJSソリューションを提出!

// TODO: add a parent selector polyfill without using jQuery

あなたが解決策を知っているならば、あなたはそれに答えとしてそれを掲示することもできますStackOverflow question if there is a vanilla JS equivalent of jQuery .has() .

クエリを実行します.
Josh Larson's polyfill-css-has 提供するquerySelectorAllWithHas (リンクのおかげで)
しかし、我々は長い間親セレクタなしで生きることができました、多分、我々はもう心配したくないでしょう.

CSSの次は何ですか?
2022年のCSSから何を期待するか
パイプラインにはもっと便利な機能がありますCSS Container Queries chromeとedgeで既に機能フラグを使用できるようにすることができます.
この記事は、新しい(そして、下劣な)CSS機能についての小シリーズの一部です.

Reference

この問題について(CSS : has (親セレクタ)👪), 我々は、より多くの情報をここで見つけました https://dev.to/ingosteinke/css-hasparent-selectors-287c

---

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol