CSS Last Odd Child?

Question

У меня есть неупорядоченный список, который может содержать четное или нечетное количество элементов.Я ищу способ удалить только CSS из последних тегов 2 li, если число li s четное.Псевдо-селектор :last-child удаляет последний независимо.

li {
float: left;
border-bottom: 1px solid #000;
}

li:last-child{
border-bottom: none;
}

Работает для нечетных чисел li s

+============================================+
+          1          |          2           +
+--------------------------------------------+
+          3          |                      +
+============================================+

Но для четных чисел мне нужно удалить нижнюю часть ячейки # 3

+============================================+
+          1          |          2           +
+--------------------------------------------+
+          3          |          4           +
+---------------------                       +
+============================================+

Итак, я подумал, что могу использовать li:nth-last-child(), но я не могу понять, каким должно быть уравнение, чтобы схватить последнего нечетного ребенка.

Это не 2n+1, 2n-1, n-1 или все, что я могу придумать.Пожалуйста помоги.

Answer 1

nth-last-child рассчитывает назад от последнего потомка, поэтому, чтобы взять второй до последнего, выражение:

li:nth-last-child(2)

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

li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

И так, все должно быть:

li:last-child,
li:nth-last-child(2):nth-child(odd) {border-bottom: none;}

В ответ на вопрос @ ithil, вот как я написал бы это в SASS:

li
  &:last-child,
  &:nth-last-child(2):nth-child(odd)
    border-bottom: none

Это не намного проще, так как для выбора «второго по порядку нечетного потомка» всегда будет требоваться «двухэтапный» селектор.

Отвечая на вопрос @ Caspert, вы можете сделать это для произвольного числа последних элементов, сгруппировав больше селекторов (кажется, что для этого должен существовать некоторый шаблон xn+y, но AFAIU эти шаблоны просто работают, считая в обратном направлении из последнего элемента).

Для трех последних элементов:

li:last-child,
li:nth-last-child(2):nth-child(odd),
li:nth-last-child(3):nth-child(odd) {border-bottom: none;}

Это место, где может помочь что-то вроде SASS, сгенерировать селекторы для вас. Я бы структурировал его как класс-заполнитель, расширил элемент и установил число столбцов в переменной следующим образом:

$number-of-columns: 3

%no-border-on-last-row
 @for $i from 1 through $number-of-columns
   &:nth-last-child($i):nth-child(odd)
     border-bottom: none

//Then, to use it in your layout, just extend:

.column-grid-list li
  @extend %no-border-on-last-row

Answer 2

Другая альтернатива:

li:last-child:not(:nth-child(odd))

Вот скрипка: http://jsfiddle.net/W72nR/

Answer 3

возможно:

li:nth-child(2n){border:1px dashed hotpink}
li:nth-child(2n-2), li:last-child{border:none;}

Answer 4

Вы можете использовать n-й дочерний селектор:

li:nth-child(3) { border-bottom: none;}

li:nth-child(4) {border-bottom: none;}

Однако, поскольку это не поддерживается в IE 8 ... вы должны просто установить класс для этих двух элементов li и использовать специфичность, чтобы установить для border-bottom значение none.