将样式应用于未选中的元素

Question

Currently, I have two rows of items set up, one of people and one of things:

person1 thing1 person2 thing2 person3 thing3

When a user clicks on a person, that person and it's associated things will stay as they were, but every other item will fade (say, with an opacity of .4). When nothing is selected, everything is highlighted - that is to say, everything has an opacity of 1). So, when you click on an item, it and it's friends will be highlighted.

I understand the javscript behind events and applying classes, so: using css, is there an efficient way to do this?

I understand that there is an inefficient solution - style each of the unselected items - but, is there something that will allow me to:

1. Change only the active items

2. Have the styling information contained in a class (ie not as inline styling)

Answer 1

While writing the question I came up with a solution, though it's not as clean as I'd like.

When an item is selected, add a class of .hasSelected to the container that holds all the list items. Then, the css would be as follows:

.hasSelected {
  .item {
    opacity: 0.4;
  }
  .item.selected {
    opacity: 1;
  }
}