子要素のフォーカスステートの変更親要素のスタイル付けSASS @ at-root

Question

下のコードの子要素span.icon-hamburgerが：focusステートを受け取ったとき、li要素のスタイリングを変更したいと考えています。 SASSソリューションを使用して、@ at-rootがここで動作することがわかりました。しかし、@ at-rootを使ってこのユースケースのSASSソリューションを見つけることはできません。このユースケースに対するあなたの考えは何ですか？

HTML：

<ol> 
    <li> 
    <span class="icon-hamburger"></span> 
    </li> 
</ol> 

CSS/SASS：

.icon-hamburger:focus { 
    @at-root ol li #{&} { 
    background-color: #fff; 
    } 
} 

Answer 1

this excellent answer by Dan Herbert:

から現在CSSで要素の親を選択する方法はありません。それを行うための方法があった場合

、それは現在のCSSセレクタ仕様のいずれかで、次のようになります。

Selectors Level 3 Spec

一方

CSS 2.1 Selectors Spec

は、あなたがに頼る必要があります親要素を選択する必要がある場合はJavaScript。

N.B.では、CSS4で可能性についていくつかの議論があります。