Как выбор последний элемент

244
06 января 2022, 06:50

Как выбрать последний элемент. Но если стоит class .none тогда выбрать пред последний.

.menuElement:last-child { 
  color: red; 
} 
 
.none { 
  display: none; 
}
<ul> 
  <li class="menuElement">Element1</li> 
  <li class="menuElement">Element2</li> 
  <li class="menuElement">Element3</li> 
  <li class="menuElement">Element4</li> 
  <li class="menuElement">Element5</li> 
  <li class="menuElement">Element6</li> 
  <li class="menuElement">Element7</li> 
  <li class="menuElement">Element8</li> 
  <li class="menuElement">Element9</li> 
  <li class="menuElement none">Element10</li> 
</ul>

Answer 1

li.menuElement:last-child {color: blue;} /* последний элемент */ 
li:not(.none).menuElement {color: red;} /* все элементы без класса .none */ 
/*----------------------------------------*/ 
li.menuElement:nth-last-child(2) /* вот так можно выбрать предпоследний элемент, но проверку на наличие класса у последнего li делать через js, но по сути первый вариант должен решить вашу проблему */

Answer 2
  1. Вы НЕ можете в css задать селектор для родительского или предшествующего элемента. Смиритесь или используйте яваскрипт.

  2. Перестройте список чтобы он шел в обратном порядке. Потом обстильте его так ,чтобы визуально порядок был прямой. Тогда вы сможете подействовать на "предпоследний" элемент, не зная его номера (т.к. по DOM он второй):

ul { 
  display: flex; 
  flex-direction: column-reverse; 
} 
 
.menuElement:first-child, 
.menuElement.none:first-child+.menuElement { 
  color: red; 
} 
 
.none { 
  display: none; 
}
Последний элемент 'none':<br> 
 
<ul> 
  <li class="menuElement none">Element10</li> 
  <li class="menuElement">Element9</li> 
  <li class="menuElement">Element8</li> 
  <li class="menuElement">Element7</li> 
  <li class="menuElement">Element6</li> 
  <li class="menuElement">Element5</li> 
  <li class="menuElement">Element4</li> 
  <li class="menuElement">Element3</li> 
  <li class="menuElement">Element2</li> 
  <li class="menuElement">Element1</li> 
 
</ul> 
 
Последний элемент НЕ 'none':<br> 
<ul> 
  <li class="menuElement">Element10</li> 
  <li class="menuElement">Element9</li> 
  <li class="menuElement">Element8</li> 
  <li class="menuElement">Element7</li> 
  <li class="menuElement">Element6</li> 
  <li class="menuElement">Element5</li> 
  <li class="menuElement">Element4</li> 
  <li class="menuElement">Element3</li> 
  <li class="menuElement">Element2</li> 
  <li class="menuElement">Element1</li> 
 
</ul>

Answer 3

с помощью css это сделать нельзя. на :last-child нельзя наложить условие (это всегда последний элемент видимый или нет).

можно сделать при помощи селекторов jquery. файктически это означает, что при помощи javascript.

также можно сделать на ванильном javascript (кода будет чуть больше). переделал пример ниже под него.

var items = document.querySelectorAll('.menuElement:not(.none)'); 
if (items.length > 0) 
  items[items.length-1].className += ' last';
.menuElement.last { 
  color: red; 
} 
 
.none { 
  display: none; 
}
<ul> 
  <li class="menuElement">Element1</li> 
  <li class="menuElement">Element2</li> 
  <li class="menuElement">Element3</li> 
  <li class="menuElement">Element4</li> 
  <li class="menuElement">Element5</li> 
  <li class="menuElement">Element6</li> 
  <li class="menuElement">Element7</li> 
  <li class="menuElement">Element8</li> 
  <li class="menuElement">Element9</li> 
  <li class="menuElement none">Element10</li> 
</ul>

READ ALSO
Настройка Chrome DevTools

Настройка Chrome DevTools

пользовался долго Firefox и теперь перешел на Chrome и сталкнулся с нехваткой такой маленькой мелочи

235
Загрузка изображений из css через file-loader

Загрузка изображений из css через file-loader

Всем приветПытаюсь разобраться с вебпаком, в частности с загрузкой изображений

169
Лучшая реализация части макета

Лучшая реализация части макета

Сайт написан на bootsrap 3, появилась задача редизайнаВозник вопрос, как лучше реализовать синею секцию, чтобы была стыковка с основной сеткой

230