One input - two classes

HTML & CSS
1

How to add another class to this:

#wrap input:checked ~ .topmenu {display: block;}

Something like:

#wrap input:checked ~ .topmenu {display: block;}, .menu-scroll {height: calc(100vh - 60px);}

… but second do not responds.
Is it possible with css only?

Best regards

2

Try using a comma instead of ~

3

The comma sign adds another selector for a ruleblock.

Here the comma invalidates the second rule.

I suggest to put the two rule-blocks on their own lines for clarity.

#wrap input:checked ~ .topmenu {display: block;}

.menu-scroll {height: calc(100vh - 60px);}
1 Like
4

Probably I didn’t explained good… I need something like this:

#wrap input:checked ~ .toplink { display: block; } 
#wrap input:checked ~ .menu-scroll { height: calc(100vh - 60px);}

(… but, of course, second do not responds)

I need, when input is checked, that both classes apply (.toplink { display: block; } AND .menu-scroll { height: calc(100vh - 60px);}

Thanx to ladans37 and Erik_J for helping

1 Like
5

Hard to tell without knowing the HTML, I assume they are both siblings to the input?

1 Like
6

This is html example:

<div class="wrapper" id="wrap">
<div class="menu-scroll">
<nav id="navigation">
<label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"/>   
    <div class="toplink"><a href="_toplink1.html">[1] TopLink</a></div>
    <div class="toplink"><a href="#link02">[02] DropdownLink</a>
    <div class="sublinks" id="link02">
    <a href="_sublink_02_1.html">[02] SubLink1</a>
    <a href="_sublink_02_2.html">[02] SubLink2</a>
    </div></div>
</nav>
</div>
</div>

I’m using this css (and it works):

#wrap input:checked ~ .toplink { display: block; }

But, as I mentioned I need to add one more class to it

.menu-scroll {height: calc(100vh - 60px);}

… and when input is checked, that both classes apply (.toplink { display: block; } AND .menu-scroll { height: calc(100vh - 60px);}

Thanx in advance

7

The menu scroll element is above the input in the HTML and css doesn’t work backwards.

You would need to move the input as a sibling before menu scroll and then target it as follows.

<div class="wrapper" id="wrap">
  <input type="checkbox" id="hamburger">
  <div class="menu-scroll">
    <nav id="navigation">
      <label for="hamburger">&#9776;</label>
      <div class="toplink"><a href="_toplink1.html">[1] TopLink</a></div>
      <div class="toplink"><a href="#link02">[02] DropdownLink</a>
        <div class="sublinks" id="link02">
          <a href="_sublink_02_1.html">[02] SubLink1</a>
          <a href="_sublink_02_2.html">[02] SubLink2</a>
        </div>
      </div>
    </nav>
  </div>
</div>

#wrap input:checked ~ .menu-scroll .toplink {
  display: block;
}
#wrap input:checked ~ .menu-scroll {
  height: calc(100vh - 60px);
}
2 Likes
8

Yes! That is what I need. Thank you PaulOB. I learned a lot from your explanation. :+1:

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.