Я работаю над древовидным представлением неопределимой вложенности, но хотел бы определить некоторые вложенные правила для стиля. Например, я хочу, чтобы у элемента первого уровня была определенная граница. Вложенные элементы сразу под ними имеют другую границу. У меня есть рабочий пример, но он статичный и многословный. Я знаю, что должен быть лучший способ использования селекторов, но я не могу заставить его работать. Вот мое текущее решение

.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;
}

Так что это работает, но, очевидно, это довольно многословно. Есть ли способ лучше?