CSS: Как пометить цвет i класса из одного последнего последнего дочернего элемента

Question

<div>
    <li>
        <span> text1 </span>
        <icon> icon </icon>
    </li>
    <li>
        <span> text1 </span>
        <icon> icon </icon>
    </li>
    <li>
        <span> text1 </span>
        <icon> icon </icon>
    </li>
    <li>
        <span> text1 </span>
    </li>
</div>

Я могу пометить last-child, но не могу отметить значок.

Я хочу пометить цвет своим активным li с icon перед ним.

Любое предложение сделать это с S CSS.

Answer 1

Рекомендую изменить структуру HTML. Значок должен быть создан тем элементом, который вызывает значок. Первый элемент не нуждается в значке, потому что это первый элемент (root элемент), а также не нужно знать, есть ли дочерние элементы.

div li:last-child {
  color:red;
}

<div>
  <li>
    <span> text1 </span>
  </li>
  <li>
    <icon> icon </icon>
    <span> text1 </span>
  </li>
  <li>
    <icon> icon </icon>
    <span> text1 </span>
  </li>
  <li>
    <icon> icon </icon>
    <span> text1 </span>
  </li>
</div>

Вы можете использовать следующее решение, если не можете изменить HTML:

div li:nth-last-child(2) icon {
  color:red;
}
div li:last-child {
  color:red;
}

<div>
  <li>
    <span> text1 </span>
    <icon> icon </icon>
  </li>
  <li>
    <span> text1 </span>
    <icon> icon </icon>
  </li>
  <li>
    <span> text1 </span>
    <icon> icon </icon>
  </li>
  <li>
    <span> text1 </span>
  </li>
</div>