Styles ohne CSS-Klassen

Eigenschaften und Styles können ohne Class durch Zählung vergeben werden

Einfach an den Parent Element die Pseudoklassen  :nth-child(1)  -  für das erste element (1) für das zweite (2) usw.

 
<style>
.navigationTest li {
        list-style: none;
        color: #fff;
        float: left;
        padding: 5px;
        margin-right: 1px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px
}
.navigationTest li:nth-child(1) {
        background-color: #058;
}
.navigationTest li:nth-child(2) {
        background-color: #069;
}
.navigationTest li:nth-child(3) {
        background-color: #07b;
}
.navigationTest li:nth-child(4) {
        background-color: #08c;
}
</style>

<ul class="navigationTest">
<li>Farbe 01</li>
<li>Farbe 02</li>
<li>Farbe 03</li>
<li>Farbe 04</li>
<ul>