CSS：セレクター（および4つの例）があります

CSS :has()セレクターは、子供の特性に基づいて親をターゲットにすることにより、要素選択に革命をもたらします。それは単なる「親セレクター」ではなく、強力な条件付きスタイリング機能を提供します。たとえば、スタイルを整えることができます<div>要素にはaが含まれている場合にのみ<code><p>：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> div：has（p）{ 背景：赤; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>以前はサポートされていませんでしたが、 <code>:has()は現在、Safari Technical Preview 137に登場しています。

別のシナリオを調べましょう。ヘッダーの後に間隔を追加しますが、字幕が存在する場合は間隔を調整します。

 H2、
.subtitle {
  マージン：0 0 1.5REM 0;
}
.header-group：has（h2）：has（.subtitle）h2 {
  マージン：0 0 0.2REM 0; / *字幕による間隔の削減 */
}

に注意してください:has() selectors： .header-group:has(h2):has(.subtitle)のチェーン。これは、 .header-group:has(h2 .subtitle)のような:has()内のセレクターリストを使用することとは異なります。チェーンされたアプローチが選択します<h2></h2>.header-group両方のanを含む場合のみ<h2></h2>および.subtitle 。ただし、セレクターリストアプローチには、選択ロジックが異なります。

考えてみてください:has() 。子どもたちに基づいて条件付きで親要素をスタイリングすることができます。これは、従来のCSSのトップダウンアプローチからの大幅な逸脱です。この機能は、CSSだけでは以前は達成できなかった多くの可能性を開きます。

画像を含むスタイリングリンク：

 A：has（> img）{
  国境：20pxの固体白。
}

> img 、画像が直接の子であることを保証します<a></a>。 :has()コンテンツに基づいた条件付きマージン/パディングにも使用できます。

:has()は、CSSセレクターレベル4の一部であり、有用なものではありませ:not 。単純な親セレクターよりもはるかに強力です。親のコンテンツに基づいて子要素を選択できます。例えば：

 /* aで要素のスタイル<figcaption> 子供 */
図：has（figcaption）{…}

/*スタイル<img  alt="CSS：セレクター（および4つの例）があります" > 内の<figure> 含む<figcaption> */
図：（figcaption）img {…}を持っています</figcaption></figure></figcaption>

チェーンおよびセレクターリストがサポートされています。

記事：has（h2）：has（ul）{…} // chained
記事：HAS（H2、UL）{…} //セレクターリスト

ただし、リスト内の無効なセレクターは:has()セレクター全体を無効にすることに注意してください。使用:where()または:is()潜在的に無効なセレクターのより堅牢な処理を行います。

サポートのテスト：

 @supports（selector（：has（p）））{
  /*サポート！ */
}

:not() selectorは、CSSセレクターレベル4からも、優れたブラウザーサポートと読みやすさの向上を提供します。

 ul li：not（：first-of-type）{
  色：赤;
}

このスタイルは、最初を除くすべてのリスト項目をスタイルします。同様の手法をマージンに使用できます。

 ul li：not（：last-type）{
  マージンボトム：20px;
}

CSSセレクターレベル4には、 :is()のものが含まれます。

 ：is（セクション、記事、脇、nav）：is（h1、h2、h3、h4、h5、h6）{
  色：＃bada55;
}

要約すると、 :has() 、 :is()および:not()とともに、dom内の複雑な関係に基づいて要素をスタイリングする強力で読みやすい方法を提供します。

さらに読む：

• Adrian Bece - Meet :has() 、ネイティブCSS親セレクター（およびその他）
• Bramus van Damme - CSS :has()セレクターは「親セレクター」以上のものです
• ミシェル・バーカー - :has()はサファリに上陸しました

以上がCSS：セレクター（および4つの例）がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。