CSS Последний нечетный ребенок?

У меня есть неупорядоченный список, который может содержать четное или нечетное количество элементов. Я ищу способ только для CSS, чтобы удалить границу из последних двух тегов li, если число li равно. Псевдо-селектор :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, или все, что я могу придумать. Пожалуйста помоги.

Ответы

Ответ 1

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

li:nth-last-child(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;}

В ответе на @thil вопрос, вот как я напишу его в 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

Ответ 2

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

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

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

Ответ 3

возможно:

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

Ответ 4

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

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

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

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