Опциональный выбор элементов на CSS

Question

....
<input name='category' value='1' type='radio' />
<input name='category' value='2' type='radio' />

<div>
  <span data-value="1" >...</span>
  <span data-value="2" >...</span>
  <span data-value="2" >...</span>
  <span data-value="1" >...</span>
</div>

....

Возможно ли выбирать элементы на странице, в зависимости от активной радио кнопки?

Внутри div могут находиться сколько угодно span, а так же до div может находиться сколько угодно input. Суть проблемы - выбрать все span, у которых data-value будет равен value активной кнопки. Необходимо решить этот вопрос без JS, на чистом CSS. Конечно, если есть варианты через любой другой способ - тоже идёт. Главное - максимально гибко. Чтобы каждое новое значение value не влекло за собой огромное кол-во кода

Answer 1

Чем вас не устраивает js?

const highlight = (evt) => {
  document.querySelectorAll('div span').forEach( el => { 
    el.classList.remove('highlight');
    if (el.dataset.value === evt.target.value) {
      el.classList.add('highlight');
    }
  });
};

document.querySelectorAll("[name='category']").forEach(e => e.onchange = highlight);

.highlight {
  border: 2px solid red;
}

<input name='category' value='1' type='radio' />
<input name='category' value='2' type='radio' />
<input name='category' value='3' type='radio' />
<input name='category' value='4' type='radio' />

<div>
  <span data-value="1" >...1</span>
  <span data-value="2" >...2</span>
  <span data-value="2" >...2</span>
  <span data-value="3" >...3</span>
  <span data-value="1" >...1</span>
  <span data-value="4" >...4</span>
</div>

Answer 2

Пример:

input[value="1"]:checked~div>span[data-value="1"] {
  color: red;
}

input[value="2"]:checked~div>span[data-value="2"] {
  color: red;
}

<form>
  <input name='category' value='1' type='radio' />
  <input name='category' value='2' type='radio' />

  <div>
    <span data-value="1" >"1"</span>
    <span data-value="2" >"2"</span>
    <span data-value="2" >"2"</span>
    <span data-value="1" >"1"</span>
  </div>
</form>

Answer 3

На чистом CSS можно, но гибкостью там и не пахнет. Для каждого value/data-value понадобится добавить селектор.

[value="1"]:checked~div [data-value="1"],
[value="2"]:checked~div [data-value="2"],
[value="10"]:checked~div [data-value="10"],

/* и так для каждой value */

[value="100500"]:checked~div [data-value="100500"] {
  background-color: coral;
}

<input name='category' value='1' type='radio' />
<input name='category' value='2' type='radio' />

<div>
  <span data-value="1">data-value = 1</span>
  <span data-value="2">data-value = 2</span>
  <span data-value="2">data-value = 2</span>
  <span data-value="1">data-value = 1</span>
</div>

Для гибкости придется таки использовать JS. Но можно оптимизировать скрипт так, чтобы не перебирать все элементы и не проставлять все классы (будет производительнее). Например, что-то вроде этого алгоритма:

0. Добавить тег <style> в код
1. Отловить onChange на радиокнопках
2. брать value выбранной радиокнопки и, например, передавать ее параметром в JS-функцию foo(the_value)
3. Изменить innerHTML тега <style> на конструкцию типа '[value="'+the_value+'"]:checked~div [data-value="'+the_value+'"] {background-color: coral;}

Так нужно будет дернуть один элемент, а не пробегать по циклу все.

БЛОГ НА HUSL

Опциональный выбор элементов на CSS

Ответы (3 шт):