How to change <li> elements that are NOT active with pure CSS?

Question

I understand how to change the description of the active element <li>

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

But how can I change all other elements that are NOT active ?

For example, all my elements are shown in bold, but when I select one of them, all the rest return to their normal state.

Thank!

Answer 1

I would suggest that I li:not(:active)should at least theoretically work.

Answer 2

Apply a rule to ALL of them, and then apply another rule to the active one.

li {
   color: blue;
}

li:active {
  color: red;
}

Result: Inactive Blue .

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

To expand Brad's answer based on your example:

You want everyone to <li>be bold until a button is pressed, right? Start with:

li { 
  font-weight: bold; 
}

Then, if you click on a list item, keep it bold, but make the rest regular:

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

~ selects all the elements that are siblings of active li, without selecting the most active.