attribute - ¿Último hijo impar de CSS?

title css

Question

Tengo una lista desordenada, que puede contener un número par o impar de elementos. Estoy buscando una forma de CSS para eliminar el borde de las últimas 2 etiquetas de li si el número de li s es par. El pseudo-selector :last-child elimina el último independientemente.

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

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

Funciona para números impares de li s

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

Pero para los números pares, necesito quitar la parte inferior de la celda n. ° 3

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

Así que pensé que podría usar li:nth-last-child() pero no puedo entender cuál debería ser la ecuación para agarrar al último niño impar.

No es 2n+1 , 2n-1 , n-1 , o cualquier cosa que se me ocurra. Por favor ayuda.

Answer 1

Otra alternativa:

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

Aquí hay un violín: http://jsfiddle.net/W72nR/

Answer 2

n-last-child cuenta hacia atrás desde el último hijo, por lo que para agarrar el penúltimo, la expresión es:

li:nth-last-child(2)

Puede combinar pseudo-selectores, por lo tanto, para seleccionar el penúltimo niño, pero solo cuando es impar, use:

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

Y entonces, todo debe ser:

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

En respuesta a la pregunta de @ithil, así es como lo escribiría en SASS:

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

No es mucho más sencillo, ya que la selección del "segundo hijo impar" siempre requerirá el selector de "dos pasos".

En respuesta a la pregunta de @Caspert, puedes hacer esto arbitrariamente para muchos elementos últimos al agrupar más selectores (parece que debe haber algún patrón xn+y para hacerlo sin agrupar, pero estos patrones AFAIU solo funcionan contando hacia atrás desde el último elemento).

Para tres últimos elementos:

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

Este es un lugar donde algo como SASS puede ayudar, generar los selectores para usted. Estructuraría esto como una clase de marcador de posición, extendería el elemento con él y establecería el número de columnas en una variable como esta:

$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 3

posiblemente:

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

Answer 4

puede usar el enésimo selector de niños:

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

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

Sin embargo, dado que esto no es compatible con IE 8 ... simplemente debe establecer una clase para esos dos elementos li y usar especificidad para establecer el borde inferior en none.