How do change <li> elements that are NOT active with pure CSS? - css

Question

I understand how to change the description of an active <li> element
li:active {
...declarations...
}
But how can I change all the other elements that are NOT active?
For example, all my elements are in bold, but when I select one of them, all the others are changed back to normal.
Thanks!

Answer 1

I'd imagine li:not(:active) should at least theoretically work.

Answer 2

Apply a rule to ALL of them, then apply a different rule to the active.
li {
color: blue;
}
li:active {
color: red;
}
Result: the un-active ones are blue.

Answer 3

After rereading your question, I think the real answer is that you can't use CSS alone to control how the elements behave on user interaction.
I realize that this won't work because the styles are applied immediately, and elements in the DOM are typically not :active by default:
li {
font-weight: bold;
}
li:not(:active) {
font-weight: normal;
}
Plus, :not() is a CSS3 pseudo-class, so support for it is rather poor right now if you have to account for older browsers.
Maybe you can do this with JavaScript (I use jQuery here)...
$('li').click(function() {
$(this).siblings().css('font-weight', 'normal');
});

Answer 4

If I understand correctly this should do it,
li{ font-weight:bold; }
:active li{ font-weight: normal; }
:active li:active{ font-weight: bold; }
So basically you want an active state on the parent which switches everything to normal and then override that for the li that is also active.

Answer 5

To expand Brad's answer based on your example:
You want all <li>'s to be bold, until one is clicked, right? Start off with:
li {
font-weight: bold;
}
Then, if a list item is clicked keep that one bold but make the others regular:
li:active ~ li {
font-weight: normal;
}
The ~ selects all elements that are siblings of the active li, without selecting the active one itself.