Targeting Previous Sibling Element CSS

Question

Ich benutze Off-Canvas-Menü, das ich versucht habe, Arbeit richtig zu bekommen. Um mein festes Menü und Off-Canvas gut zu spielen, musste ich meinen Header aus dem inneren Wrapper entfernen, aber jetzt wird meine Kopfzeile nicht mehr verschoben, wenn das Menü geöffnet wird.

Wenn Off Canvas geöffnet wird, wendet es ein .is-open-Recht auf den inneren Wrapper an, auf den dann das CSS angewendet wird.

Ich versuche, diese Zeile von CSS zu meinem Header NUR hinzufügen, wenn die .IS-Right-Open-Klasse zu meinem Wrapper hinzugefügt wird.

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

Ich habe versucht, auf diese Weise zum Ziel:

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

}

Meine HTML sieht wie folgt aus, wenn das Menü geschlossen ist:

<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 wenn

Eröffnet

<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> 

Kann ich mein Header-Element nur dann anvisieren, wenn das nächste Geschwisterelement die Klasse .is-open-right hat ?? Nach dem, was ich gelesen habe ... sieht aus, als müsste ich zu einer JS-Lösung gehen.

Answer 1

Es gibt keinen 'vorherigen Geschwister' Selektor. Ihre Lösung sollte sein, sicherzustellen, dass Sie die Klassen auf das übergeordnete Element anwenden.

Ihre HTML sollten wie folgt aussehen:

<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> 

Eine weitere Option ist die header unter den off-canvas-wrapper-inner zu bewegen, so dass Sie es als die nächsten Geschwister ausrichten können (mit +).

Der aktuelle W3-Spezifikationsentwurf enthält auch eine :has pseudoselector. Wenn vollständig unterstützt, können wir dieses Problem mit dem folgenden Selektor lösen: .previous-class:has(+ .next-class)