Как выбрать «последний ребенок» с определенным именем класса в CSS?

Question

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

Как выбрать «последнего ребенка» с именем класса: список ?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

Я знаю, что приведенный выше пример не работает, но естьчто-нибудь похожее на это работает?

ВАЖНО:

a) Я не могу использовать ul li:nth-child(3), потому что может случиться так, что он на четвертом или пятомместо тоже.

b) Нет JavaScript.

Любая помощь будет оценена, спасибо!

Answer 1

Это можно сделать с помощью селектора атрибутов.

[class~='list']:last-of-type  {
    background: #000;
}

class~ выбирает определенное целое слово. Это позволяет вашему элементу списка иметь несколько классов, если это необходимо, в различном порядке. Он все равно найдет точный класс «list» и применит стиль к последнему.

См. Рабочий пример здесь: http://codepen.io/chasebank/pen/ZYyeab

Подробнее о селекторах атрибутов:

http://css -tricks.com / атрибут-селекторы / http://www.w3schools.com/css/css_attribute_selectors.asp

Answer 2

Вы можете использовать соседний селектор брата для достижения чего-то похожего, что может помочь.

.list-item.other-class + .list-item:not(.other-class)

Эффективно нацелится на следующий сразу после последнего элемента с классом other-class.

Подробнее читайте здесь: https://css -tricks.com / almanac / селекторы / a / смежный брат /

Answer 3

Это нахальный ответ, но если вы ограничены только CSS и можете повернуть свои элементы в DOM, возможно, стоит подумать.Он основан на том факте, что, хотя селектор для элемента last определенного класса отсутствует, на самом деле можно задать стиль first .Хитрость заключается в том, чтобы затем использовать flexbox для отображения элементов в обратном порядке.

ul {
  display: flex;
  flex-direction: column-reverse;
}

/* Apply desired style to all matching elements. */
ul > li.list {
  background-color: #888;
}

/* Using a more specific selector, "unstyle" elements which are not the first. */
ul > li.list ~ li.list {
  background-color: inherit;
}

<ul>
  <li class="list">0</li>
  <li>1</li>
  <li class="list">2</li>
</ul>
<ul>
  <li>0</li>
  <li class="list">1</li>
  <li class="list">2</li>
  <li>3</li>
</ul>

Answer 4

Полагаю, самый правильный ответ: используйте :nth-child (или, в данном конкретном случае, его аналог :nth-last-child).Большинство знает этот селектор только по его первому аргументу, чтобы захватить диапазон элементов на основе вычисления с n, но он также может принимать второй аргумент «из [любого селектора CSS]».

Ваш сценарий может быть решенс этим селектором: li:nth-last-child(1 of .list)

Но технически правильно, это не значит, что вы можете использовать его, потому что этот селектор на данный момент реализован только в Safari.

Для дальнейшего чтения:

• https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
• http://caniuse.com/#search=nth-child

Answer 5

Я предлагаю вам воспользоваться тем фактом, что вы можете назначить несколько классов для элемента следующим образом:

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

Последний элемент имеет класс list, как и его братья и сестры, но также имеет класс last, который можно использовать для установки любого свойства CSS, которое вы хотите, например:

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}

Answer 6

Вы не можете нацелиться на последний экземпляр имени класса в вашем списке без JS.

Однако, вы не можете быть полностью неудачником, в зависимости от того, чего вы хотите достичь,Например, используя следующий селектор брата, я добавил визуальный разделитель после последнего из ваших .list элементов: http://jsbin.com/vejixisudo/edit?html,css,output

Answer 7

Используйте этот селектор: ul > li:last-of-type. Это выберет каждый последний элемент списка (<li>) в неупорядоченном списке (<ul>).

Разбивка ответа: я выбираю только дочерний элемент (>) из неупорядоченного списка (<ul>), который является последним дочерним элементом его типа (<li>), из родительского элемента (<ul>) ).

Вы можете использовать Id или класс, чтобы ограничить селектор определенными неупорядоченными списками. Например: ul.my-class > li:last-of-type выберет последний <li> только из неупорядоченных списков этого класса

Answer 8

$('.class')[$(this).length - 1] 

или

$( "p" ).last().addClass( "selected" );

Answer 9

Существует обходной путь (в определенных ситуациях) к этой проблеме:

Хотя это не дает прямого ответа на вопрос, существует высокая вероятность того, что этот способ мышления достигает той же цели:

Допустим, мы пошли, чтобы скрыть все элементы в списке ниже индекса 3

<ul>
    <li>test1</li>
    <li>test2</li>
    <li class="hide">test3</li>
    <li>test4</li>
    <li>test5</li>
</ul>

CSS

li{ display:none; }
li.hide ~ li{ display:block; }

LiveДемо

Это избавит от необходимости добавлять класс hide ко всем элементам, которые должны быть скрыты, поэтому у нас остается только один класс hide, который управляет ими всеми,теперь вам не нужно использовать last-of-type, который не может работать с именами классов.Вы должны переосмыслить свой подход к классификации вещей