CSS は兄弟の属性に基づいて要素を選択的にターゲットにするにはどうすればよいですか?

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

DOM 内の他の要素の状態に基づいて要素を特定し、対象を指定することは困難な場合があります。 CSS セレクターは、コンビネータとセレクター構文によって課される制約により、提供されるオプションが限られています。親子関係や疑似クラスの使用など、いくつかの基本的なテクニックは適用できますが、特定のシナリオではより高度なソリューションが必要になります。

現在の実装の制限

現在の標準であるセレクター 3 には、親セレクターや以前の兄弟セレクターのような重要な機能がありません。これらの機能により、要素の構造化とターゲット設定のための CSS の機能が大幅に拡張されます。セレクターの主題を指定できないことも制約になります。

今後の Selectors 4 の可能性

今後の Selectors 4 標準は、これらの制限に対処することを目的としています。 jQuery の機能からインスピレーションを得た :has() 擬似クラスは、柔軟なソリューションを提供します。 :has() を使用すると、親内の他の要素の存在に基づいて要素を選択できます。

問題の解決

質問に示されている問題の例。別の要素の data-status 属性に基づいて要素をターゲットにする必要がありますが、セレクターの :has() を使用して解決できます4:

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

このセレクターは、:has() を使用して、指定された data-status を持つ子 div を含むセクションを選択し、次に、 .blink または .spin クラス。

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