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

<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.

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

9 80
css css3 css-selectors

9 ответов:

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

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

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

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

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

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

подробнее об атрибуте селекторы:

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

46

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

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

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

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

18

это дерзкий ответ, но если вы ограничены только 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>
15

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

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

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

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

3

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

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

2

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

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

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

Демо

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

0

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

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

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

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

или

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