Survey form - dropdown issues

Hello! It’s me again.
I’m wondering why the filter tag isn’t switching to off after the radio button is checked.

Here is full code https://github.com/spyhere/start-html

Here are the lines

.cc-selector input {
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.cc-selector input:active + .planet {
opacity: .9;
}
.cc-selector input:checked + .planet {
-webkit-filter: none !important;
-moz-filter: none !important;
filter: none !important;
}
.planet {
cursor: pointer;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}

It’s because of the <br> tags after the inputs.

1 Like

Whoa! How does it work? Why br is breaking that logic? Thank you a lot!

Because they count as sibling elements and the adjacent sibling combinator (+) requires that the .planet element immediately follows the input element.

Adjacent sibling combinator

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

<div></div>
<p>I'm red</p>

<div></div><br>
<p>I'm not red</p>
div + p {
  color: red;
}

@lasjorg Oh man, thank you very much. I am not that familiar with the adjacent combinator element, so I just haven’t noticed that. Thank you again!