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

Рейтинг: 0Ответов: 1Опубликовано: 13.01.2023

Есть блок

<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>

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

введите сюда описание изображения

css
Источник: Stack Overflow на русском

Ответы

▲ 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>