How to target an html inside a pseudo element?

Question

I have a burger menu made with the input method. When the input is checked I want to make the hamburger icon disapper and make an "X" appear. Is that possible? How can I trigger the class of the burger icon in the :checked pseudo?

Here the html

  <nav>
      <label class="label" for="burger"><img src="images/hamburger.svg" class="hamburger" width="63px" alt="icona menu"></label>
      <label class="labelx" for="burger"><img src="images/xicon.svg" class="xicon" width="55px" alt="icona x per chiudere menu"></label>
      <input class="hamburgerinput" type="checkbox" id="burger">
      <ul class="menu">
        <li class="item home"><a class="menuitem menuitemactive" href="index.html">Home</a></li>
        <li class="item cani"><a href="cani.html" class="menuitem menuitemactive">Cani</a></li>
        <li class="item gatti"> <a href="gatti.html" class="menuitem menuitemactive">Gatti</a></li>
        <li class="item comeaiutarci"><a href="comeaiutarci.html" class="menuitem menuitemactive">Come aiutarci</a></li>
        <li class="item contatti"><a href="contatti.html" class="current menuitem menuitemactive">Contatti</a></li>
      </ul>
    </nav>

Please click edit, then the `[<>]` snippet editor and provide a [mcve] with relevant script and CSS — mplungjan, Aug 13 '20 at 08:19
There's lots of ways to do this using CSS only, which is much more efficient - suggest google "css hamburger icon" — StudioTime, Aug 13 '20 at 08:19

score 3 · Accepted Answer · edited Aug 13 '20 at 08:30

3

To change the style of the labels, the input needs to be moved to the top of the nav. This will allow the labels to be targeted using the ~ selector, which means "any sibling". So input:checked ~ .label will match ANY sibling with the class label if the input is checked.

Here is a raw example of what you need

.labelx,
.menu,
input:checked ~ .label {
  display: none;
}

input:checked ~ .labelx,
input:checked ~ .menu {
  display: block
}

  <nav>
      <input class="hamburgerinput" type="checkbox" id="burger">
      <label class="label" for="burger"><img src="images/hamburger.svg" class="hamburger" width="63px" alt="icona menu"></label>
      <label class="labelx" for="burger"><img src="images/xicon.svg" class="xicon" width="55px" alt="icona x per chiudere menu"></label>
      
      <ul class="menu">
        <li class="item home"><a class="menuitem menuitemactive" href="index.html">Home</a></li>
        <li class="item cani"><a href="cani.html" class="menuitem menuitemactive">Cani</a></li>
        <li class="item gatti"> <a href="gatti.html" class="menuitem menuitemactive">Gatti</a></li>
        <li class="item comeaiutarci"><a href="comeaiutarci.html" class="menuitem menuitemactive">Come aiutarci</a></li>
        <li class="item contatti"><a href="contatti.html" class="current menuitem menuitemactive">Contatti</a></li>
      </ul>
    </nav>

edited Aug 13 '20 at 08:30

Richard Parnaby-King

14,703
11
69
129

answered Aug 13 '20 at 08:20

mttetc

711
5
12

wow! it works! Thank you very much! Couls you please explain a little your CSS? Obviosly I'm pretty new to this, I don't understand why you've written .labelx and .menu before the check pseudo. Thanks! – Aug 13 '20 at 13:41
.labelx and .menu are set to display none on load because we don't want to see them (they're references to elements in the html), all of the :checked css is just to show or hide what you want, in this case we show the menu when the checkbox is checked and be hide the burger to show the X icon – mttetc Aug 13 '20 at 13:46
so, I wanted to make the X show instead of the burger icon (when input is checked), and I wrote input:checked ~ .label then display: none, but it didn't work. it works only if you mention .labelx and .menu before. that's what I dodn't understand – Aug 13 '20 at 14:31
yes, this is what the css do, .labelx is shown when input is checked – mttetc Aug 13 '20 at 14:32
I guess it is simpler with JS (if you know JS :)) ) – Aug 13 '20 at 14:33

How to target an html inside a pseudo element?

1 Answers1