0

Есть у меня набор вложенных элементов. Мне нужно перед теми элементами, у которых нет детей поставить символ. А у тех, где детей нет, просто сместить вправо.

Делал так

div {
  margin-left: 20px;
}
div:before {
  content: '\2012';
}

div:not(div) {
  margin-left: 30px;
}

div:not(div):before {
  content: '';
}
<div>
  <span>1.1</span>
  <div>
    <span>2.1</span>
    <div>
      <span>3.1</span>
    </div>
  </div>
  <div>
    <span>2.2</span>
  </div>
</div>
<div>
  <span>1.2</span>
</div>

div:not(div) игнорируется

Пробовал инвертировать условие и вместо :not() использовать :has()

div:has(div) {
  margin-left: 20px;
}

div:has(> div):before {
  content: '\2012';
}
<div>
  <span>1.1</span>
  <div>
    <span>2.1</span>
    <div>
      <span>3.1</span>
    </div>
  </div>
  <div>
    <span>2.2</span>
  </div>
</div>
<div>
  <span>1.2</span>
</div>

Тоже все проигнорировалось

4
  • 1
    div:not(div) это какое то самоисключающее правило у вас
    – teran
    25 ноя 2021 в 12:36
  • Могу написать на js, вам подойдет? Или строго css?
    – Max Watson
    25 ноя 2021 в 12:42
  • @teran имелись в виду элементы, у которых нет детей 25 ноя 2021 в 12:50
  • @MaxWatson на js и я могу 25 ноя 2021 в 12:51

1 ответ 1

0

Обошел проблему, добавив в конечные узлы отдельный класс

div {
  margin-left: 20px;
}

div:before {
  content: '\2012';
}

div.end-item:before {
  content: '';
  margin-left: 1em;
}
<div>
  <span>1.1</span>
  <div>
    <span>2.1</span>
    <div class="end-item">
      <span>3.1</span>
    </div>
  </div>
  <div class="end-item">
    <span>2.2</span>
  </div>
</div>
<div class="end-item">
  <span>1.2</span>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.