これまでの兄弟要素をターゲットにするCSS

Question

私は仕事を正しくしようとしているオフキャンバスメニューを使用しています。私の固定メニューとオフキャンバスをうまく動かすために、私はオフキャンバスの内側ラッパーからヘッダーを取らなければなりませんでしたが、メニューが開いたときにヘッダーは移動しません。

オフキャンバスを開いたときには、内部ラッパーに.is-open-rightを適用し、その後にCSSが適用されます。

私のラッパーに.is-right-openクラスが追加された場合にのみ、この行のCSSをヘッダに追加しようとしています。

-webkit-transform: translateX(-450px); 
    transform: translateX(-450px); 

私はこの方法をターゲットにしようとしていた。メニューが閉じているときに

.is-open-right, .is-open-right > .header { 
-webkit-transform: translateX(-$offcanvas-size-large); 
transform: translateX(-$offcanvas-size-large); 

}

私のHTMLは次のようになります。

オープン

<div class="off-canvas-wrapper"> 
<header class="header scrolled" role="banner"></header> 
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div> 
</div> 

HTML

<div class="off-canvas-wrapper"> 
<header class="header scrolled" role="banner"></header> 
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-right" data-off-canvas-wrapper=""></div> 
</div> 

次の兄弟要素が.is-open-right ??というクラスを持つ場合にのみ、私のヘッダー要素をターゲットできますか？私が読んだことから、私はJSソリューションに行く必要があるかもしれないように見えます。

Answer 1

「前の兄弟」セレクタはありません。あなたの解決策は、親要素にクラスを適用していることを確認することです。あなたのHTMLは次のようになります。

：

<div class="off-canvas-wrapper is-off-canvas-open is-open-right"> 
    <header class="header scrolled" role="banner"></header> 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""></div> 
</div> 

別のオプションは、あなたが（+を使用して）次の兄弟として、それをターゲットにすることができoff-canvas-wrapper-innerの下headerを移動することです。

現在のW3仕様のドラフトには、:has pseudoselectorも含まれています。完全にサポートされている場合は、次のセレクタでこの問題を解決できます。.previous-class:has(+ .next-class)