0

Currently I have a tweaked radio button coded : 

<label>
    <input type="radio" ... />
    <span>...</span>
</label>

And some CSS applying to the first element following the input once checked like :

input:checked + span {
    ...
  }

It works perfectly well: when the label is clicked, the input gets in checked state and the CSS does apply to the span element (change of text color ..)

Though now I add an image just before the span :

<label>
    <input type="radio" ... />
    <img ... />
    <span>...</span>
</label>

with similar CSS added on top of previous : 

input:checked + img {
    ...
  }

Now what happens is : the image is applied the right CSS when the image is clicked. Though the span is no longer changed now. I don't understand what gets in the way. + is still relevant as in both cases span and img are the direct following elements (of their type)

Maxence
  • 2,029
  • 4
  • 18
  • 37
  • great thanks. Never heard of `~` but it does fix. I thought `+` was applying to the first element of its kind, not an adjacent element. Good to know. – Maxence Jan 14 '18 at 21:22

2 Answers2

2

What gets in the way is that the "+" selector means "select the x that's immediately after the y". Once you get the img in the middle, the span is no longer immediately after the input.

You might want to use the ~ general sibling combinator instead of the + adjacent sibling combinator.

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Facundo Corradini
  • 3,825
  • 9
  • 24
1

You should use:

input:checked ~ span {
    ...
}

That's how you can reach the span element

Max
  • 82
  • 7