素晴らしい開発者の皆さん、こんにちは！この投稿では、 :has() 次の Web プロジェクトで。 :has() は比較的新しいものですが、UI 内のさまざまな要素を制御できるため、フロントエンド コミュニティで人気を集めています。疑似クラスとは何か、そしてそれをどのように利用できるかを見てみましょう。

構文

　 :has() CSS 疑似クラスは、要素内で検索しているものが見つかって考慮された場合に、要素のスタイルを設定するのに役立ちます。こう言っているようなものです、 「このボックスの中に何か特別なものがある場合は、ボックスのスタイルをこのようにし、かつこのようにしてください。」

:has(<direct-selector>) {
  /* ... */
}

スタイルの問題

過去何年もの間、CSS を使用して親の直接の子に基づいて親要素をスタイル設定したり、別の要素に基づいて要素をスタイル設定したりする方法はありませんでした。これを行う必要がある場合は、JavaScript を使用し、HTML の構造に基づいてクラスのオン/オフを切り替える必要があります。 :has() その問題を解決しました。

見出しレベル 1 要素 (h1) これはブログ リスト ページの投稿のタイトルまたはそれに類するもので、見出しレベル 2 (h2) に直接続きます。この h2 は投稿の小見出しになる可能性があります。もしそうなら h2 存在し、重要であり、その直後に h1、その h1 を目立たせるとよいでしょう。以前は、JS 関数を作成する必要がありました。

オールドスクールのやり方 – JavaScript

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

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

この JS 関数は、 h2 それを進めて、ハイライトコンテンツのクラスを適用して、 h1 重要な記事として目立つようになります。

最新の CSS が新しく追加され、改良されました。ブラウザーで実行できる機能は大幅に進歩しました。従来は JavaScript で行う必要があったことを、CSS を利用してすべてではなく一部で実行できるようになりました。

新しい学校のやり方 – CSS

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

:has() を追加してみよう!

今すぐ使用できます :has() JS 関数と同じことを実現します。この CSS は h1 をチェックし、 兄弟コンビネータ 直後に続く h2 をチェックし、テキストに青の色を追加します。以下にいくつかの使用例を示します。 :has() 重宝します。

:has セレクターの例 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

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

:has セレクターの例 2

多くの場合、Web 上で作業する私たちは画像を操作したり、画像を操作したりします。私たちは次のようなツールを使用している可能性があります 曇り 画像にさまざまな変換を利用できますが、通常はドロップ シャドウ、境界線の半径、およびキャプションを追加する必要があります (alt 属性の代替テキストと混同しないでください)。

以下の例では、 :has() 図または画像に figcaption 要素があるかどうかを確認し、ある場合は背景と境界線の半径を適用して画像を目立たせることができます。

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

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

私はできますか :has() その？

あなたはそれを見ることができます :has() 最新のブラウザ間で優れたサポートを提供します。

:has() コミュニティの中で！

Twitter で自分のネットワークに連絡して、同僚がどのように使用しているかを確認しました。 :has() 日々の仕事の中で、彼らはそれについてこう言わなければなりませんでした。

svg:has(> #Mail) {
  stroke-width: 1;
}

コミュニティのメンバーが現実世界の問題を解決するために最新の CSS をどのように使用しているかを見るのは素晴らしいことです。また、アビーがアクセシビリティの理由で CSS を使用していることに感謝します。

心に留めるもの

使用する際に注意すべき重要なポイントがいくつかあります :has() 参照元の箇条書き MDN。

• 疑似クラスは、引数内の最も具体的なセレクターの特異性を引き継ぎます。
• Status :has() 疑似クラス自体はブラウザではサポートされていないため、セレクター ブロック全体が失敗します。 :has() のような寛容なセレクターリストにあります。 :is() & :where()
• 　 :has() 疑似クラスを別の疑似クラス内にネストすることはできません :has() 
• 疑似要素も有効なセレクターではありません。 :has() および疑似要素は有効なアンカーではありません :has()

まとめ

などの高度な機能を含む CSS の力を活用します。 :has() 疑似クラスを使用すると、優れた Web エクスペリエンスを作成できるようになります。 CSS の強みはそのカスケード性と特異性にあり、その最大の部分により、CSS の可能性を最大限に活用できるようになります。 CSS の機能を活用することで、Web デザインと開発を前進させ、新たな可能性を解き放ち、画期的なユーザー インターフェイスを作成できます。

リンク：

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
• プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
• プラトンESG。 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
• プラトンヘルス。 バイオテクノロジーと臨床試験のインテリジェンス。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/the-power-of-has-in-css/