attribute - ¿Último hijo impar de CSS?
title css (4)
Otra alternativa:
li:last-child:not(:nth-child(odd))
Aquí hay un violín: http://jsfiddle.net/W72nR/
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.
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
posiblemente:
li:nth-child(2n){border:1px dashed hotpink}
li:nth-child(2n-2), li:last-child{border:none;}
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.