css selectors - Targeting Previous Sibling Element CSS -


this question has answer here:

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

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -