CSS セレクターは他の要素の状態に基づいて要素をターゲットにすることができますか?

CSS で他の要素の状態に基づいて要素を選択する方法

はじめに

特定の要素をターゲットにすることは、常に CSS の基本的な側面です。ただし、ページ内の他の要素の状態に基づいて要素のスタイルを設定する必要がある場合、複雑さが生じます。この記事では、現在の CSS セレクターの制限を調査し、今後の標準による潜在的な解決策を紹介します。

現在の CSS セレクターの制限

CSS セレクターには、要素の選択においていくつかの制限があります。他人の状態に基づいて。まず、親セレクターまたは以前の兄弟セレクターを使用して要素の状態に直接アクセスすることはできません。次に、セレクターの対象として単一の要素のみをターゲットにできるため、条件に基づいて複数の要素にスタイルを適用することができません。

例: ホバー状態に基づいて要素をターゲットにする

1 ページに複数のセクションがあるとします。各セクションには、ステータスを表す「finished」データ属性を持つ div が含まれています。 「finished」属性を持つ div がホバーされるたびに、次のセクションで点滅および回転する要素に色付きの境界線を追加したいと考えています。このための単純な CSS セレクターは次のようになります:

section:hover + section .blink,
section:hover + section .spin {
  border: 1px solid red;
}

ただし、CSS には最初のセクションの div をターゲットにする親セレクターがないため、これは機能しません。

潜在的な解決策: Selectors 4 と :has()

今後の Selectors 4 のドラフトでは、次のものが導入されます。 :has() という疑似クラスがこの問題を解決します。 :has() を使用すると、特定の子孫を持つ要素を選択できます。これは、それが使用される要素の子孫と一致する相対セレクター引数を受け取ります。

上記の問題に対する :has() を使用した解決策は次のようになります。

section:has(div[data-status~=finished]) + section div:matches(.blink, .spin) {
  border: 1px solid red;
}

ここでは、次のようになります。 has() は、セレクターが「finished」ステータスの div を含むセクションのみをターゲットにすることを保証します。また、子コンビネータと :matches() を組み合わせて、後続のセクションで点滅要素と回転要素の両方をターゲットにします。

結論

現在の CSS セレクターには選択に制限がありますが、他の要素の状態に基づいて要素を管理するため、Selectors 4 の今後の :has() 疑似クラスが潜在的な解決策を提供します。セレクター構文が強化され、要素の柔軟性と条件付きターゲットが可能になります。

以上がCSS セレクターは他の要素の状態に基づいて要素をターゲットにすることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。