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

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.

<p>I'm red</p>

<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!