My parent element is not getting affected

Question

I am trying to make a sliding hamburger menu, and I am unable to move the div to the left when the checkbox (icon) is checked. The HTML for the following:

<div class="nav">
    <div class="container">
        <img src="{{ asset('assets/images/user.jpg') }}">
        <a href="#">Sameer Manek</a>
    </div>
</div>
<div class="window">
    <input type="checkbox" id="nav-trigger" class="nav-trigger" />
    <label for="nav-trigger"><i class="fa fa-bars"></i></label>
    {% block main %}{% endblock %}
</div>

and the CSS:

.nav-trigger:checked + label {
    left: 215px;
}

.nav-trigger:checked ~ .window {
    background-color: transparent;
    left: 200px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-trigger + label, .window {
    transition: left 0.2s;
}

The 1st and the last CSS are applied properly and the label moves to left from its current position, but the div .window does not

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

The tilde '~' is not a parent selector (see this question and answers) and there isn't currently a parent selector in CSS (see this question and answers.)

You'll need to use some javascript to select the parent element. jQuery makes this easy if you're already using it.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 24 '16 at 23:43

damo-s

1,008
7
16

Andy Hoffman · Answer 2 · 2016-04-24T23:57:19.313

The following CSS won't work for you because ~ doesn't affect parent elements in the DOM.

.nav-trigger:checked ~ .window { }

I would not add JavaScript to a thing unless you absolutely can't accomplish the task purely with CSS. In your case, a very small HTML change will allow you to keep things pure CSS.

You have to arrange your HTML such that your .nav-trigger checkbox and .windoware at the same level in the DOM.

HTML Changes

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"><i class="fa fa-bars"></i></label>

<div class="window">    
  <!-- window contents here -->
</div>

CSS Changes

Using translate will always be smoother than using left to move something around the screen. Using translate is nice because it forces hardware acceleration. Your UI will feel more like a native app, which is always what you want.

.nav-trigger:checked ~ .window {
    ...
    transform: translateX(200px); /* swapped 'left' for 'transform' */
}
.nav-trigger + label, .window {
    transition: transform 0.2s; /* swapped 'left' for 'transform' */
}

Demo

http://codepen.io/antibland/pen/vGzBRm?editors=1100

My parent element is not getting affected

2 Answers2