Проблема заключается в том, что в css нельзя стилизовать предыдущие элементы.
И она не решаема в данном случае (когда стилизовать требуется и предыдущие, и последующие). Так что единственное решение, которое так же пришло в голову - то, что предложил Алексей Тен
Чтобы не загрязнять разметку, это могут быть псевдоэлементы (в принципе, даже одного хватит), которые спозиционированы абсолютом и разрисованы линейным градиентом на квадратики.
А-ля так, только градиент, например, сделать для подсветки ячеек на фон.
Есть ещё две теоретические идеи (display: contents и игра с отдельным блоком поверх), но нужна проверка, для чего сейчас у меня не совсем есть время :))
P. S. Не нравятся мне такие задачи, которые требуют костылей и хаков. На JS было бы идеально решить.
Все инпуты располагаем до всех лейблов. После этого начинают работать селекторы с тильдой ~
т.е. инпут ~ соответствующий лейбл и лейблы куда можно сходить "лошадью".
Но больше мне нравится идея Рустам Байназаров нарисовать в псевдоэлементе клеточки с помощью градиента и накладывать его абсолютом относительно нужной клетки (лейбла).
Для ячеек, что после красного идут можно определить стили через селекторы + / ~
А вот для ячеек что идут до красного, кажется что никак нельзя стили определить, ведь селекторы соседей работают только вниз. Однако, чисто гипотетически можно наложить поверх доски ещё одну прозрачную дочку повернув на 180 градусов и тогда по идее можно. Только надо изучить как себя тут будет вести свойство pointer-events
А ещё чисто теоретически можно составить полигонов 5x5 и накрыть ими внахлёст всю доску и если какой-то полигон получает фокус, он теряет прозрачность и становится виден нужный узор ходов.