Последний элемент li всегда меняется на определенный после содержимого

Question

Я делаю список, который содержит определенное содержимое, в этом списке с помощью CSS я помещаю +, когда это первый li или средний элемент, но если это последний, я изменяю содержимое с = в CSS.

Я вижу это: 1 + 2 + 3 = Result Я получаю: 1 + 2 + 3 + Result

Мой код:

.list-look{
    padding-left: 0;
    overflow: hidden;
}
ul li{
    list-style: none;
}
.list-look li.itemsLook{
    padding-right: 10px;
    display: inline-block;
    float: left;
    width: 270px;
    position: relative;
  list-style: none;
}
ul li.itemsLook:not(:last-child)::before{
    speak: none;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    content: "+";
    
    float: right;
    font-size: 35px;
    width: 10px;
    top: 25%;
    right: 15px;
  
}
ul li.itemsLook:last-child::before{
    content: "=";
   
    float: right;
    top: 25%;
    
}

<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
  <div>
    Result
  </div>
</ul>

Answer 1

:last-child ищет любой элемент.Вы хотите использовать :last-of-type, который будет применяться к последнему элементу <li> в вашем примере:

.list-look{
    padding-left: 0;
    overflow: hidden;
}
ul li{
    list-style: none;
}
.list-look li.itemsLook{
    padding-right: 10px;
    display: inline-block;
    float: left;
    width: 4em;
    position: relative;
  list-style: none;
}
ul li.itemsLook:not(:last-of-type)::before{
    speak: none;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    content: "+";
    
    float: right;
    font-size: 35px;
    width: 10px;
    top: 25%;
    right: 15px;
  
}
ul li.itemsLook:last-of-type::before{
    content: "=";
   
    float: right;
    top: 25%;
    
}

<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
  <div>
    Result
  </div>
</ul>

Answer 2

Ваш пример не работает так, как вы ожидали, потому что вы неправильно понимаете, как: работает последний ребенок.Он не работает для изменения последнего элемента li.itemsLook, он работает с этим элементом только в том случае, если он является последним дочерним элементом ul (а в данном случае это не так, поскольку у вас есть div в качестве последнего дочернего элемента. https://www.w3schools.com/cssref/sel_last-child.asp

Одним из способов решения этой проблемы может быть перемещение div из ul следующим образом:

<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
</ul>
<div>
  Result
</div>

, а затем добавление ul, div { display: inline} в ваш CSS.