Как задать стили соседнему элементу?

Question

[LastGeneral]

Как задать filter: opacity(0.5) или display: none картинке, когда у input стоит псевдо-класс :disabled?

<div>
  <img src="http://sto32.webstudiomoon.com/wp-content/uploads/2020/08/corps-1.jpg" alt="">
  <input id="p" type="radio" name="p" value="8" disabled="">
  <label for="p">8</label>
</div>

Пробовал так:

input[type="radio"]:disabled+img {
    filter: opacity(0.5);
}

Не работает.

Answer 1

[WapSter]

Картинка должна быть ниже input в dom дереве

Comments

[LastGeneral]

Переставил и ничего не произошло

[WapSter]

LastGeneral, код

[LastGeneral]

WapSter,

<div class="in">
  <input id="p" type="radio" name="p" value="8" disabled="">
  <label for="p">800W</label>
  <img src="http://sto32.webstudiomoon.com/wp-content/uploads/2020/08/corps-1.jpg" alt="">
</div>

.in {
  display: flex;
}
input {
  order: 1;
}
label {
  order: 2;
}
img {
  order: 3;
}
input[type="radio"]:disabled + img {
    display: none;
}

[WapSter]

LastGeneral, уже ответил в комментариях к ответу 0xD34F. И читай документацию, тем более к основам работы с селекторами

[LastGeneral]

LastGeneral, label мешал, понял спасибо

Answer 2

[0xD34F]

Поместить картинку после input'а. Если важно, чтобы отображалась до - тогда задать display: flex родителю и выставить order.

Comments

[LastGeneral]

<div class="in">
  <input id="p" type="radio" name="p" value="8" disabled="">
  <label for="p">800W</label>
  <img src="http://sto32.webstudiomoon.com/wp-content/uploads/2020/08/corps-1.jpg" alt="">
</div>

.in {
  display: flex;
}
input {
  order: 1;
}
label {
  order: 2;
}
img {
  order: 3;
}
input[type="radio"]:disabled + img {
    display: none;
}

Все как Вы сказали, но не работает

[0xD34F]

LastGeneral, замените + на ~.

[WapSter]

LastGeneral, ниже, но не совсем уж вниз, тогда используй ~, а не +

[LastGeneral]

LastGeneral, label мешал, понял спасибо