Как на чистом css стилизовать последний нечётный элемент?

#html #css

Есть условный родительский блок с секциями, которые добавляются и удаляются динамически:


  

  

  

  ...



Можно ли на чистом css стилизовать последнюю нечётную секцию? То есть если секций
чётное число, тогда ничего не происходит, а если нечётное, то к последней секции применяются
другие стили?
    

Ответы

Ответ 1

Для этого можно использовать псевдокласс последнего элемента :last-child и с помощью
:nth-child выделить все нечётные элементы:



section {
  display: block;
  width: 200px; 
  height: 50px;
  margin-bottom: 5px;
  background-color: black
}
section:last-child:nth-child(2n+1) {
  background-color: red;
}

  

  

  




Ответ 2

Поскольку формулировка «последний нечетный» не подразумевает, что он одновременно
будет и последним, и нечетным, вот альтернативный вариант, который при любом количестве
элементов будет подсвечивать последний нечетный.



section {
  height: 20px;
  margin-bottom: 10px;
  background: #000;
}

section:nth-last-child(-n+2):not(:nth-child(even)) {
  background: red;
}