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

245

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

Вы НЕ можете в css задать селектор для родительского или предшествующего элемента. Смиритесь или используйте яваскрипт.
Перестройте список чтобы он шел в обратном порядке. Потом обстильте его так ,чтобы визуально порядок был прямой. Тогда вы сможете подействовать на "предпоследний" элемент, не зная его номера (т.к. по 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>