Pracuję nad widokiem drzewa, którego nie można ustalić, ale chciałbym zdefiniować pewne zagnieżdżone reguły stylizacji. Na przykład chcę, aby element pierwszego poziomu miał określoną granicę. Zagnieżdżone elementy bezpośrednio poniżej, aby mieć inną granicę. Mam działający przykład, ale jest statyczny i gadatliwy. Wiem, że za pomocą selektorów musi być lepszy sposób, ale wydaje mi się, że nie działa. Oto moje obecne rozwiązanie

.item {
    border-left-color: #somecolor1;
}
.item > .item {
    border-left-color: #somecolor2;
}
.item > .item > .item {
    border-left-color: #somecolor3;
}
.item > .item > .item > .item {
    border-left-color: #somecolor4;
}
.item > .item > .item > .item > .item {
    border-left-color: #somecolor5;
}

Więc to działa, ale oczywiście jest to rodzaj gadatliwości. Czy jest lepszy sposób?