CSS子要素選択親要素の実装

通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親要素を選択することは可能ですか?

<ul>
    <li>
        <a href="#" class="active">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
</ul>

a.active を含む li を選択したい場合、どうすれば実現できますか? これまで学習してきた CSS では解決方法がないように思われますが、今日はこの機能を持つ CSS 疑似クラス: has() を紹介します。まだドラフト段階ですが、事前に学習しておくことは可能です。

li:has(> a.active){
    色：赤;
}

:has は包含を示すだけでなく、兄弟関係も示すことができます。

div:has(+ p){
    色：赤;
}

<div> タグの選択を示します。ただし、div タグの後には <p> が続く必要があります。 :notと一緒に使うこともできます

記事:not(:has(a)){
    色：赤;
}

<a> を含まない <article> タグを表します。ここで、:not と :has の順序に注意してください。順序が異なると意味も異なります。

記事:has(:not(a)){
    色：赤;
}

<a>以外の<article>タグが含まれていることを示します

実際、先ほど説明した :focus-within も、子要素を通じて親要素を選択する疑似クラスですが、条件は子要素がフォーカスを取得するかどうかのみであり、 :has はより柔軟で強力です。

フォーム:フォーカス内{
    背景色:黒;
}

:has で実装すると、次のように記述できます。

フォーム:has(:focus){
    背景色:黒;
}

親要素のCSS子要素選択の実装に関するこの記事はこれで終わりです。より関連性の高い親要素のCSS子要素選択については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。