Как изменить <li>элементов, которые НЕ активны с чистым CSS?

Question

Я понимаю, как изменить описание активного <li> элемента

li:active {
...declarations...
}

Но как я могу изменить все другие элементы , которые НЕ активны ?

Например, все мои элементы выделены жирным шрифтом, но когда я выбираю один из них, все остальные становятся обычными.

Спасибо!

Answer 1

Я думаю, li:not(:active) должно хотя бы теоретически работать.

Answer 2

Применить правило ко ВСЕМ из них, затем применить другое правило к активному.

li {
   color: blue;
}

li:active {
  color: red;
}

Результат: неактивные синие .

Answer 3

Если я правильно понимаю, это должно сделать,

li{  font-weight:bold; }

:active li{ font-weight: normal; }

:active li:active{ font-weight: bold; }

Таким образом, в основном вы хотите активное состояние родительского элемента, которое переключает все в нормальное состояние, а затем переопределяет это для li, которое также активно.

Answer 4

Перечитав ваш вопрос, я думаю, что реальный ответ заключается в том, что вы не можете использовать только CSS для управления поведением элементов при взаимодействии с пользователем.

Я понимаю, что это не сработает, потому что стилиприменяется немедленно , а элементы в DOM обычно не :active по умолчанию :

li {
    font-weight: bold;
}

li:not(:active) {
    font-weight: normal;
}

Плюс, :not() - псевдокласс CSS3,так что поддержка сейчас довольно слабая, если вам приходится учитывать старые браузеры.

Может быть, вы можете сделать это с помощью JavaScript (я использую jQuery здесь) ...

$('li').click(function() {
    $(this).siblings().css('font-weight', 'normal');
});

Answer 5

Чтобы расширить ответ Брэда, основываясь на вашем примере:

Вы хотите, чтобы все <li> были выделены жирным шрифтом, пока один из них не будет нажат, верно?Начните с:

li { 
  font-weight: bold; 
}

Затем, если щелкнуть элемент списка, оставьте этот жирный шрифт, но оставьте остальные регулярными:

li:active ~ li {
  font-weight: normal;
}

~ выбирает все элементы, которые являются родственными элементамиactive li, без выбора самого активного.