How to target the sibling of a parent from a child in css/scss?

Question

How to target the sibling of the parent from a child? I'm trying to make a pure css hamburger menu and i have this checkbox input inside a label where it's :before content is a trigram.

on desktop view the ul list is displayed block and none on mobile. Now the show and hide is working when the ul is a direct sibling of the input box, the tilde selector works.

However what i wanted to do is take out the ul inside the label to be it's own sibling so the input is the only child left of the label. With the ul out, the show and hide doesn't work anymore.

how do i target the ul when the input is checked?

HTML:

<nav>
    <label class="nav-toggler">
        <input type="checkbox" />
    </label>
    <ul class="nav-links">
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</nav>

SCSS:

.nav-toggler{
    &:before{
        content:'\2630';
    }
    input{
        opacity: 0;
        width: 0;
        height: 0;
        &:checked ~ .nav-links{
           display: block;
        }
    }
}

css cannot climb the tree ... biut you can replace input with a label with the for attribute and hide the checkbox one upper level. It will allow to go down the tree and the next sibblings `
....` basicly, the structure usable with :checked selector — G-Cyrillus, May 23 '19 at 14:27
@G-Cyr hey thanks for your reply, but how? i can't seem to picture it. thanks! — Twirlman, May 23 '19 at 14:28
take the input outside , give it an id. give to the label the for attribute with the value of the input id. clicking on the label will toggle the checked state of the input anywhere in the page — G-Cyrillus, May 23 '19 at 14:31
@G-Cyr thanks man!, i have added a transition effect so when clicked the links would dropdown but it never does. initially i set the link's height to 0, and set it to auto when clicked. do i have to position it absolute and add a bottom margin and remove it when click? — Twirlman, May 23 '19 at 14:42
thats another question, but 0 to auto is only 2 steps, try 0 to xx value with max-height instead — G-Cyrillus, May 23 '19 at 14:44

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You should use the label and input with an id and a for attribute

looking for a parent selector is a wrong method and impossible in CSS see Is there a CSS parent selector?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Associating a <label> with an <input> element offers some major advantages:

The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

Your HTML can become

<nav>
  <input type="checkbox" id="myId" />
  <label class="nav-toggler" for="myId">
    </label>
  <ul class="nav-links">
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</nav>

and the (S)CSS rules

.nav-toggler{
    &:before{
        content:'\2630';
      cursor:pointer;
    }
}
    input{
        opacity: 0;
        width: 0;
        height: 0;
        &:checked ~ .nav-links{
           display: block;
        }
    }

How to target the sibling of a parent from a child in css/scss?

1 Answers1