Как выбрать "последнего ребенка" с определенным именем класса в 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 ответов
Я предлагаю вам воспользоваться тем, что вы можете назначить несколько классов одному элементу вот так:
<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;
}
Это можно сделать с помощью селектора атрибутов.
[class~='list']:last-of-type {
background: #000;
}
на class~ выбирает определенное целое слово. Это позволяет элементу списка иметь несколько классов, если это необходимо, в различном порядке. Он все равно найдет точный класс "list" и применит стиль к последнему.
см. рабочий пример здесь:http://codepen.io/chasebank/pen/ZYyeab
подробнее об атрибуте селекторы:
http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp
вы можете использовать соседний селектор sibling для достижения чего-то подобного, что может помочь.
.list-item.other-class + .list-item:not(.other-class)
будет эффективно воздействует на следующий элемент после последнего элемента с классом other-class.
подробнее здесь: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/
это дерзкий ответ, но если вы ограничены только 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>Я думаю, что самый правильный ответ: использовать :nth-child (или, в данном конкретном случае, его коллега :nth-last-child). Большинство знает этот селектор только по первому аргументу, чтобы захватить диапазон элементов на основе вычисления с n, но он также может принять второй аргумент "[любого селектора CSS]".
ваш сценарий может быть решена с помощью этого селектора: li:nth-last-child(1 of .list)
но быть технически правильным не означает, что вы можете использовать его, Хотя, потому что этот селектор на данный момент только реализовано в Safari.
для дальнейшего чтения:
вы не можете нацелить последний экземпляр имени класса в своем списке без JS.
однако вы не можете быть полностью вне css-удачи, в зависимости от того, чего вы хотите достичь. Например, используя следующий селектор братьев, я добавил визуальный разделитель после последнего из ваших .list элементы здесь:http://jsbin.com/vejixisudo/edit?html, css, выход
существует обходной путь (в определенных ситуациях) к этой проблеме:
хотя это не отвечает на вопрос напрямую, есть высокая вероятность этот способ мышления достигает той же цели:
допустим, мы пошли, чтобы скрыть все элементы в списке, которые ниже index 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 class для всех элементов, которые должны быть скрыты, поэтому мы остаемся только с одним классом,hide, который управляет ими всеми. теперь, вам не нужно использовать last-of-type который не может работать с именами классов. вы должны пересмотреть свой подход к классификации вещей
использовать этот селектор: ul > li:last-of-type . Это позволит выбрать каждый последний элемент списка (<li>) в неупорядоченный список (<ul>).
разбивка ответа: я выбираю только ребенка (>) неупорядоченного списка (<ul>) это последний ребенок его типа (<li>) от родительского элемента (<ul>).
вы можете использовать Id или класс, чтобы ограничить селектор определенными неупорядоченными списками. Например: ul.my-class > li:last-of-type будет выбрать последний <li> только из неупорядоченных списки этого класса