css selectors - Targeting Previous Sibling Element CSS -
this question has answer here:
- is there “previous sibling” css selector? 12 answers
i'm using off canvas menu i've been trying work correctly. in order fixed menu , off-canvas play nicely, had take header out of off canvas inner wrapper, header won't move on when menu opened.
when off canvas opened, applies .is-open-right inner wrapper has css applied it.
i'm trying add line of css header when .is-right-open class added wrapper.
-webkit-transform: translatex(-450px); transform: translatex(-450px);
i trying target way:
.is-open-right, .is-open-right > .header { -webkit-transform: translatex(-$offcanvas-size-large); transform: translatex(-$offcanvas-size-large);
}
my html looks when menu closed:
<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 when opened
<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>
am able target header element when next sibling element has class .is-open-right ?? i've read... looks might have go js solution.
there no 'previous sibling' selector. solution should make sure applying classes parent element.
your html should this:
<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>
another option move header
below off-canvas-wrapper-inner
can target next sibling (using +
).
the current w3 spec draft includes :has
pseudoselector. when supported can solve problem following selector: .previous-class:has(+ .next-class)
Comments
Post a Comment