別の要素の状態に基づいて CSS 要素をターゲットにするにはどうすればよいですか?

CSS で別の要素の状態に基づいて要素を選択的にターゲットにする方法

CSS で、別の要素の状態に基づいて要素をターゲットにする現在のセレクター構文の制限により、要素の使用は困難になる可能性があります。状況を完全に理解するために、この機能に影響を与える 3 つの重要な条件を検討します。

状態に基づいて要素を選択するための条件:

1. 表現要素の状態の: ターゲット要素と参照要素の状態は、既存の単純な要素を使用して表現できますか?セレクター?
2. 構造的関係: コンビネータを使用して要素間の構造的接続を確立できますか?
3. セレクターの主題: ターゲット要素を使用できますか?コンプレックスの対象として設定されるselector?

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

主な制限は、親または以前の兄弟セレクターがないことです。この欠陥により、次のような関係を確立することができなくなります。

• 親から子: 親の状態に基づいて子要素を識別する
• 次兄弟から後の兄弟へ: 前の兄弟の条件に基づいて後の兄弟を選択します兄弟

セレクター 4 と :has() 疑似クラスによる潜在的な解決策:

現在のセレクター標準はこの問題に対処していませんが、今後の進歩Selectors 4 では、これらの制限を緩和する可能性のある :has() 擬似クラスが導入されています。 :has() を使用すると、セレクターは、適用される親要素内の特定の子孫要素を検索できます。

例:

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)

このセレクターは、後続のセクション内の div 要素を識別します。前のセクションに「finished」を持つ div が含まれている場合、「.blink」または「.spin」クラスのいずれかを持つもの

注: :matches() 疑似クラスは現在開発中であり、まだすべてのブラウザでサポートされていません。

一時的な解決策として、JavaScript でこのロジックを手動で実装できます。 Document.querySelector() などの関数を使用して、条件を満たす要素を選択します。

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