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

Ответ 1

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

<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;
}

Ответ 2

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

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

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

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

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

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

Ответ 3

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

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

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

Подробнее здесь: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Ответ 4

Это нахальный ответ, но если вы ограничены только CSS и можете повернуть свои элементы в DOM, возможно, стоит подумать. Он основан на том факте, что, хотя нет последнего селектора для последнего элемента определенного класса, фактически возможно стилизовать первый. Хитрость заключается в том, чтобы затем использовать 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>

Ответ 5

Я думаю, что самый правильный ответ: Используйте :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

Ответ 6

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

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

Ответ 7

Просто нашел чистый (но грязный) ответ css для коллеги

Работает только если все .list выровнены

.list + .list + .list{
  color:red;
}

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

Ответ 8

В этой ситуации существует обходное решение (в конкретных ситуациях):

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

Допустим, мы пошли, чтобы скрыть все элементы в списке ниже индекса 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 Demo

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

Ответ 9

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

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

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

Ответ 10

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

или

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