Добавить css стили только для первого уровня вложенности

Question

Есть блок

<div class="nav-links">
  <a href="/test">First link 1 level</a>
  <div class="sub-block">
    <a href="/test2">First link 2 level</a>
    <a href="/test2">Second link 2 level</a>
  </div>
  <a href="/test">Second link 1 level</a>
  <a href="/test">Third link 1 level</a>
</div>

Как создать стили для ссылок первого уровня, чтобы они НЕ передались на ссылки второго уровня? Классов на ссылках нет. Можно обращаться только через тег.

Answer 1

Так что ли ?

a{
display: block;
}
a:not(.sub-block > a){
  color:red;
}

<div class="nav-links">
  <a href="/test">First link 1 level</a>
  <div class="sub-block">
    <a href="/test2">First link 2 level</a>
    <a href="/test2">Second link 2 level</a>
  </div>
  <a href="/test">Second link 1 level</a>
  <a href="/test">Third link 1 level</a>
</div>

БЛОГ НА HUSL

Добавить css стили только для первого уровня вложенности

Ответы (1 шт):