Изменить стиль блока, не меняя родительские и дочерние, имеющие точно такой же class (CSS)

Question

[Alexander Lashchevsky]

У нас есть 4 divа, вложенных друг в друга:

<div class="block">
    <div class="block">
        <div class="block">
            <div class="block">
                Текст
            </div>
            Текст
       </div>
        Текст
    </div>
    Текст
</div>

Есть стили, имеющие к ним отношение:

.block {
    padding: 5px; 
    border-color: #808080; 
    border-style: solid; 
    border-width: 1px 1px 3px 3px;
}
.block:hover {border-color: red; color: red;}

Необходимо сделать так, чтобы при наведении на блок менялись цвета только того блока, на который навели, не меняя ничего у родительских и дочерних блоков.

Что усложняет:
К сожалению, мы никак не можем использовать в CSS связку .block + .block (блоки генерируются CMS и перед началом каждого блока стоят комментарии, из-за которых не получается адекватно использовать .block + .block) и мы не можем идентифицировать (id="") каждый блок, вообще не можем вносить никакие изменения в сам html код (т.е. пытаться что-то сделать можно только в CSS).

Как это сделать, подскажите пожалуйста?

Ссылка на JSFiddle, где это всё показно.

С уважением, Александр.

Answer 1

[goodknight]

Тут только JavaScript
JSFIDDLE

И немного CSS изменил, добавив

.hover .block{
    color: black;
}

Без него меняется цвет шрифта всех элементов, (был бы красным текст всех дочерних элементов, но рамка была бы черной)

Но это, конечно, костылек, потому что не надо делать средствами JS то, что должен делать HTML + CSS.

Answer 2

[5nook]

а на стороне клиента с помощью JS вы можете пронумеровать блок? то есть с помощью js проставить им id или доп классы которые пронумерует блоки например block-1, block-2

есть такая возможность?

Answer 3

[Юрий Лобанов]

1. Можете ли Вы использовать js?
2. Не совсем понимаю, как Вам поможет селектор с +. Но если проблема только в комментариях, возможно поможет селектор с ~.