cssのhas（）の力

仲間の開発者、CSSの:has()pseudo-classのエキサイティングな世界に飛び込みましょう！ 比較的新しいものですが、:has()は、要素の内部構造に基づいてスタイリングを正確に制御できるため、フロントエンド開発者の間ですぐにお気に入りになりました。 その機能と実用的なアプリケーションを調べてみましょう。

理解:has()に含まれている場合、スタイル

この

要素。 ":has() 構文：

一般的なスタイリングチャレンジの解決

:has(<direct-selector>) {
  /* Styles applied if the direct selector is found within the parent */
}</direct-selector>

以前は、子供の存在のみに基づいて親要素をスタイリングする必要がありました。

これをエレガントに解決します。

（タイトル）の後に

（subtitle）が続く可能性のあるブログ投稿のリストを検討してください。 An:has()がその直後に存在する場合にのみ、を視覚的に強調表示することをお勧めします。

の前に、これにはJavaScriptが必要でした

<h1></h1>古い（javascript）方法：<h2></h2> <h1></h1> <h2></h2> このJavaScriptコードは、:has()要素を繰り返し、フォロー

をチェックし、スタイリングのクラスを追加します。

新しい（css）方法：

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

この簡潔なCSSは、

と隣接する兄弟コンビネーター（<h1></h1>）を使用して同じ結果を達成します。 <h2></h2>青のスタイルは、すぐに

がそれに続く場合にのみスタイルします。

実用的

例

h1:has(+ h2) {
  color: blue;
}

:has() <h1></h1> <h2></h2>

例1：

:has()html：

:has()

css：

最初ののみが青色になります。

例2：キャプション付きのスタイリング画像

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>...</p>

<h1>This is a test</h1>
<p>...</p>

しばしば、画像とキャプションを使用しています。 画像の表示を強化できます。

h1:has(+ h2) {
  color: blue;
}

html：<h1></h1><h2></h2>

css：

:has()これは

。

ブラウザのサポートとコミュニティの使用

<figure>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="The Power of :has() in CSS ">
  <figcaption>My Aunt Sally's Doggo</figcaption>
</figure>

最新のブラウザで幅広いサポートを楽しんでいます（詳細なブラウザ互換性情報については、Caniuse.comをチェックしてください）。 コミュニティのフィードバックは、アクセシビリティの強化を含む創造的な用途を明らかにしています 重要な考慮事項：

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

• 特異性：:has()最も具体的な内部セレクターの特異性を継承します。
ブラウザの互換性：
• や:has()。 :is()ネスティング：:where()は別の
。
• にネストできません :has()pseudo-elements：pseudo-elementsは、:has()
• :has()結論：

は、CSSアーセナルへの強力な追加であり、以前はJavaScriptに依存しているエレガントで効率的なスタイリングを可能にします。 その機能と制限を理解することにより、Web開発スキルを高め、より堅牢で保守可能なコードを作成できます。

さらなる読み取り：

:has()

Isha Deedの記事に関する記事：has（）

• css-tricks on：has（）
• Chromeブログ投稿on：has（）
• css-tricks：has（）selector

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