Как сделать так, чтобы при нескольких подходящих HTML элементу CSS селекторах с равным весом применялся селектор относящийся к ближайшему родителю?

Question

Finesse @Finesse

HTML
CSS

Как сделать так, чтобы при нескольких подходящих HTML элементу CSS селекторах с равным весом применялся селектор относящийся к ближайшему родителю?

Есть несколько равноправных с точки зрения семантики CSS стилей:

.style1 a {
  color: red;
}
.style2 a {
  color: green;
}

А в HTML коде есть блоки, к которым эти стили применяются, и которые могут друг в друга вкладываться. Например:

<div class="style2">
    <span>
        <a href="/">Style 2</a>
    </span>
    <div class="style1">
        <div>
            <a href="/">Style 1</a>
        </div>
        <div class="style2">
            <a href="/">Style 2</a>
        </div>
    </div>
</div>

В результате получается, что вторая ссылка («Style1») окрашивается в зелёный цвет. Это происходит из-за того, что тег ссылки подходит под правила .style1 и .style2, и, так как эти правила имеют одинаковый вес, применяется правило .style2, потому что это правило объявлено после правила .style1.

Как, не зная заранее о том, какой блок в какой будет вложен, сделать так, чтобы применялся стиль только ближайшего родительского блока со стилевым классом (то есть вторая ссылка стала красной)?

Песочница с указанным кодом: codepen.io/anon/pen/zvXmOw

P.S. Можно менять HTML код. Но учтите, что ссылки могут быть где угодно.

Вопрос задан более трёх лет назад
305 просмотров

Комментировать

Подписаться 1 Сложный Комментировать

Answer 1 · 2015-11-23 12:31:38

В CSS нет понятия "ближайший родитель", поэтому привязаться к этому не получится.
Есть решение, которое накладывает дополнительные условия на код:

Все теги этой группы классов (style1, style2, ...) должны дополнительно помечаться классом группы, например block.
Целевой тег (в примере a) должен лежать не глубже n уровней от ближайшего предка из группы классов (в примере n = 2).

Решение - https://jsfiddle.net/k9jmgauz/

.style1 > a, .style1 > :not(.block) > a {
  color: red;
}
.style2 > a, .style2 > :not(.block) > a {
  color: green;
}

<div class="style2 block">
    <span>
        <a href="/">Style 2</a>
    </span>
    <div class="style1 block">
        <div>
            <a href="/">Style 1</a>
        </div>
        <div class="style2 block">
            <a href="/">Style 2</a>
        </div>
    </div>
</div>

Как сделать так, чтобы при нескольких подходящих HTML элементу CSS селекторах с равным весом применялся селектор относящийся к ближайшему родителю?

Войдите на сайт