Блог

Я уже некоторое время борюсь с этим. У меня есть панель мониторинга, на которой показаны некоторые метки со значениями. Количество значений на панели мониторинга является динамическим. Я построил это с помощью сетки, поэтому каждый раз, когда у меня нечетное количество значений, последнее получает свою собственную строку. Моя миссия состояла в том, чтобы сделать последнюю строку панели управления недоступной border-bottom , так как она портит ее внешний вид.

Я пробовал использовать :last-child , но это будет работать только тогда, когда у меня будет нечетное количество значений на панели мониторинга. То же :nth-last-child(-n 2) самое относится и к тем, которые нацелены на последние два элемента, когда у меня четное количество элементов на панели мониторинга.

Даже:

Странный:

Есть ли способ динамически настроить, чтобы последняя строка не использовалась border-bottom в обоих случаях, когда в моей панели мониторинга нечетное и четное количество значений?

 .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  margin: 2em;
  bordr: 1px solid black;
}

.item{
  border-bottom: 1px solid black;
}

.item:last-child,
.item:nth-last-child(2):nth-child(odd){
  border-bottom: none;
  color: red;
} 

 <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div> 

Попробуйте выбрать :последний дочерний элемент и :последний дочерний элемент только в том случае, если его и нечетный элемент:

 :last-child,
:nth-last-child(2):nth-child(odd){
   //...
}