How to change elements opacity based on if checkbox is or is not checked with CSS only?

Problem :

I know that I could use .is(':checked') with jQuery, but is there a CSS way? I kind of would like to make this #navbar-checkbox:checked #mobile-nav { display: block; } bit of code work, as I know I could do something similar with :hover, but is there a way to do it with :checked ?

So the full markup:

CSS

#mobile-nav { display: none; }
#navbar-checkbox:checked #mobile-nav { display: block; }

That's really all I want.

Solution :

It would be helpful to see your markup, but it is possible.

For example, this assumes a checkbox that is adjacent (specified by the + combinator) to the element you want to target:

.test {
  background-color: red;
  color: white;
}

input[type="checkbox"]:checked + .test { opacity: 0.5; }

<input type="checkbox">
<div class="test">Test</div>