CSSの（has）セレクターの紹介

この記事では、コンテンツに基づいて要素を選択するための強力なツールであるCSS

セレクターについて説明します。 比較的新しいものですが、そのサポートは主要なブラウザ（Safari 15.4、Chromium 105、およびFirefoxの旗の後ろ）にわたって成長しています。 :has()

ターゲット

要素（添付されている要素）を、括弧内の特定の条件が満たされている場合です。 これは、

や:has()のような他の擬似クラスに似ています。 ただし、それらとは異なり、は相対的なセレクターのリストを受け入れ、複雑な選択基準を有効にします。 たとえば、:hover:active :has()の紹介

ターゲットをターゲットにするために、子供の組み合わせを使用してください：

記事：has（＆gt; img）。 の特異性は、その括弧内の最も特定のセレクターによって決定されます（例えば、article:has(img)はIDセレクターの特異性を継承します）。 <article></article>兄弟セレクターは<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907547642572.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="An Introduction to the :has() Selector in CSS ">

To target only direct children, use the child combinator: article:has(> img)で使用することもできます。 :has()スタイルan :has(#id, p, .class)要素が直接続く場合にのみ

要素が続きます。 一般的な兄弟の組み合わせ（

）は、より広い兄弟選択を可能にします。たとえば、:has()スタイルa h1:has( h2) <h1></h1> <h2></h2> 兄弟兄弟がその後どこにでもある。 ~ ul:has(~ p)<ul></ul> <p></p>

セレクターは、作成して条件を付けるためにチェーンできます。たとえば、

スタイルanのみ

:has() article:has(> img:first-child):has(h1 h2) <article></article> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907548383844.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="An Introduction to the :has() Selector in CSS ">

これらの例を紹介するCodepenデモが利用可能です。 この記事は、CSSのパワーを解き放つ、SitePoint Premiumで入手可能です。

CSSに関するよくある質問（FAQ）：セレクター（このセクションは、セレクターの履歴および現在のブラウザのサポートを正確に反映しているため、ほとんど変化しません。）

CSSとは何ですか：セレクターがあり、どのように機能しますか？

css

セレクターは、子供に基づいて要素を選択できる強力なツールです。 それは関係の擬似クラスであり、選択は要素間の関係に依存します。 :has() CSS：すべてのブラウザにセレクターを使用できますか？

ブラウザのサポートは

のサポートが改善されていますが、まだ普遍的ではありません。最新情報に使用できるようなサイトを確認してください。

どうすればjqueryを使用してセレクターを使用できますか？:has()

ネイティブブラウザーのサポートが成長している間、より広い互換性のために

jqueryを使用できます。 構文は、CSSバージョンに非常に似ています

：セレクターと他のCSSセレクターを持っていることの違いは何ですか？

:has()

は、その関係性においてユニークです。属性や位置のみに焦点を当てたセレクターとは異なり、子要素の存在に基づいて選択します。

次の選択肢がありますか？

代替案には、既存のCSSセレクターのJavaScriptまたはより複雑な組み合わせが含まれますが、これらはしばしば

。 :has()なぜ：セレクターは

すべての

ブラウザでサポートされていませんか？

最初に、レンダリング速度に関するパフォーマンスの懸念が広範囲にわたる採用を妨げました。 ただし、これらの懸念に対処するにつれて、ブラウザのサポートは改善されています。 :has()：cssファイルにセレクターを使用できますか？

はい、しかしそれをサポートするブラウザでのみ。 ：has selector？

の構文は何ですか？

基本的な構文は

。

です

：他のセレクターとセレクターを使用できますか？

はい、

を他のセレクターと組み合わせることで、より複雑な選択を行うことができます。

次の未来は何ですか？

未来は明るく見えます。 ブラウザのサポートが改善されるにつれて、:has(selector)はますます一般的になりつつあります

以上がCSSの（has）セレクターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。