CSS セレクターを使用して、別の要素の状態に基づいて DOM 要素を選択するにはどうすればよいですか?

CSS の状態関係に基づいて要素を選択する

問題: 指定された要素に基づいて DOM 内の他の要素を選択する要素の状態。

の条件選択:

• 単純なセレクターを使用して状態を表します (例: div、[data-status~=finished])。
• コンビネーターを使用して構造的関係を表現し、複雑なセレクターを形成します.
• 対象の要素を複合体の主題にしますselector.

現在の制限:

残念ながら、次の理由により、現在の CSS セレクターを使用してこれらの条件をすべて満たすことはできません:

• 親セレクターの欠如 (サブジェクトの祖先をターゲットにするため)要素)
• 前の兄弟セレクターの欠如 (対象要素の前にある兄弟をターゲットにするため)

今後の機能:

今後の CSS Selectors 4 標準では、これらに対処する機能が導入されています制限事項:

• :matches() pseudo-class: 複数の複合セレクターをグループ化します。
• :has() pseudo-class:に一致する子要素を含む要素を選択します。 selector.

例の問題の解決:

:has() と :matches() を使用すると、CSS セレクター 4 の例の問題を解決できます。

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin) {
  /* styles for targeted elements */
}

による代替アプローチJavaScript:

これらの機能はまだすべてのブラウザーでサポートされていませんが、現時点では :has():

$('section:has(> div[data-status~=finished]) + section > div').filter('.blink, .spin').css('color', 'red');

を使用して JavaScript を使用して要素を選択できます。

以上がCSS セレクターを使用して、別の要素の状態に基づいて DOM 要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。