CSS selectors die voorgaan

Als ik bijvoorbeeld meerdere elementen in een ander element heb staan, doe ik eigenlijk altijd een css selector gebruiken als in het voorbeeld hieronder:

<style>
.menu {
border: 1px solid #d2d2d2;
}
.menu li:not(.no-items) {
width: 50px;
height: 50px;
display: inline-block;
list-style: none;
background-color: #f2f2f2;
}
.no-items {
width: 98%;
display: block;
color: #ff0000;
}
.selected-item {
background-color: #fbfbfb;
}
</style>
<!-- In html -->
<ul class="menu">
    <li class="no-items">Geen items aanwezig</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="selected-item">Item 3</li><!-- Met javascript geselecteerd (is op geklikt) -->
    <li>Item 4</li>
</ul>

In sommige browsers zal het li element met class selected-item gewoon een andere achtergrondkleur krijgen, maar ik kom steeds vaker tegen in browsers zoals Google Chrome, dat de .menu li selector voor de .selected-item selector gaat. Ik heb ook al geprobeerd om de :not selector te gebruiken. Het werkt nog steeds niet echt. Ik probeer eigenlijk om niet elke li een eigen klasnaam te geven, misschien wel raar. Ik wil het heel graag met css oplossen. Een lijst kan wel 200 items bevatten, dus zal de html output ook heel groot worden als er steeds class attributen in komen, terwijl css zo'n handige selectors heeft, waarvan het juist de bedoeling is dat je niet alles hoeft te benoemen. (en dat de html simpel en compact is)

Wat ik dus wil:
- ul lijst
-- li elementen zonder klasnaam: afmetingen 50x50 px, achtergrond: #f2f2f2, display: inline-block
-- li met classnaam no-items: display: block, afmetingen: 30px hoog en 98% breed, geen achtergrond kleur, tekstkleur: #d2d2d2;
-- li met classnaam selected-item: eigenlijk hetzelfde als de li zonder klassenaam, maar dan met achtergrond: #fbfbfb;

Hoe krijg ik dit voor elkaar?