Как добавить цвет к элементу, используя выбранные данные

Question

Когда пользователь нажимает на опцию, чтобы выбрать ее, атрибут data-selected добавляется к .item.Как мне стилизовать это состояние .item DIV и придать ему цвет рамки?

Я пробовал это, но, похоже, не работает

div[data-selected=".item"]{ border-color: #333; }

Answer 1

Добавить такой стиль

div.item[data-selected] {
  border: 2px solid #333;
}

div.item[data-selected] {
  border: 2px solid #333;
}

<div class="item" data-selected="">
  ABC
</div>

Answer 2

Больше В частности, если вы хотите выбрать со значением атрибута, вы можете сделать как фрагмент ниже

Этот тип выбора называется Селектор атрибутов

div.item[data-selected="value"] {
  border: 1px solid #000;
}

<div class="item" data-selected="value">
  Having Border
</div>
<div class="item">
  Not Having Border
</div>

Answer 3

Вы можете оформить его с помощью следующего селектора

div.item[data-selected] {
  border: 1px solid rgba(0,0,0, 0.5);
}

Вот скрипка для этого

https://jsfiddle.net/3hp2v70r/