¿Cómo selecciono el “último hijo” con un nombre de clase específico en CSS?

  • test1
  • test2
  • test3
  • test4

¿Cómo selecciono el “último hijo” con el nombre de clase: lista ?

  ul li.list:last-child{background-color:#000;}  

Sé que el ejemplo anterior no funciona, pero ¿hay algo similar que funcione?

IMPORTANTE:

a) No puedo usar ul li:nth-child(3) , porque podría suceder que esté en el cuarto o quinto lugar también.

b) Sin JavaScript.

¡Cualquier ayuda será apreciada, gracias!

Le sugiero que aproveche el hecho de que puede asignar múltiples clases a un elemento como ese:

 
  • test1
  • test2
  • test3
  • test4

El último elemento tiene la clase de list como sus hermanos, pero también tiene la last clase que puede usar para establecer cualquier propiedad de CSS que desee, así:

 ul li.list { color: #FF0000; } ul li.list.last { background-color: #000; } 

Esto se puede hacer usando un selector de atributos.

 [class~='list']:last-of-type { background: #000; } 

La class~ selecciona una palabra completa específica. Esto le permite a su elemento de la lista tener múltiples clases si es necesario, en orden diferente. Todavía encontrará la “lista” de clases exacta y aplicará el estilo a la última.

Vea un ejemplo de trabajo aquí: http://codepen.io/chasebank/pen/ZYyeab

Lea más sobre los selectores de atributos:

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

Puede usar el selector de hermanos adyacente para lograr algo similar, que podría ayudar.

 .list-item.other-class + .list-item:not(.other-class) 

Apuntará efectivamente al elemento siguiente inmediatamente después del último elemento con la clase other-class .

Lea más aquí: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Esta es una respuesta descarada, pero si está limitado a CSS solo y puede revertir sus elementos en el DOM, podría valer la pena considerarlo. Se basa en el hecho de que, si bien no existe un selector para el último elemento de una clase específica, en realidad es posible diseñar el primero . El truco es usar flexbox para mostrar los elementos en orden inverso.

 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; } 
 
  • 0
  • 1
  • 2
  • 0
  • 1
  • 2
  • 3

Supongo que la respuesta más correcta es: Use :nth-child (o, en este caso específico, su contraparte :nth-last-child ). La mayoría solo conoce este selector por su primer argumento para tomar un rango de elementos basado en un cálculo con n, pero también puede tomar un segundo argumento “de [cualquier selector de CSS]”.

Su escenario podría resolverse con este selector: li:nth-last-child(1 of .list)

Pero ser técnicamente correcto no significa que puedas usarlo, porque este selector solo está implementado en Safari.

Para lectura adicional:

No puede orientar la última instancia del nombre de clase en su lista sin JS.

Sin embargo, es posible que no seas del todo descarado, dependiendo de lo que quieras lograr. Por ejemplo, al usar el siguiente selector de hermanos, he agregado un divisor visual después del último de sus elementos de lista aquí: http://jsbin.com/vejixisudo/edit?html,css,output

Hay una solución (en situaciones específicas) a este problema:

Si bien esto no responde la pregunta directamente, hay una gran probabilidad de que esta forma de pensar logre el mismo objective:

Digamos que fuimos a ocultar todos los elementos en la lista que son inferiores al índice 3

 
  • test1
  • test2
  • test3
  • test4
  • test5

CSS

 li{ display:none; } li.hide ~ li{ display:block; } 

Demo en vivo

Esto eliminará la necesidad de agregar una clase hide a todos los elementos que deben ocultarse, por lo que nos queda una sola clase, hide , que los gobierna a todos. ahora, no necesita usar el last-of-type que no puede funcionar con nombres de Clase. debes volver a pensar tu enfoque de clasificar cosas

Utilice este selector: ul > li:last-of-type . Esto seleccionará cada último elemento de la lista (

  • ) en una lista desordenada (

      ).

      Desglose de la respuesta: estoy seleccionando solo el elemento secundario ( > ) de una lista desordenada (

        ) que es el último elemento secundario de su tipo (

      • ) del elemento principal (

          ).

          Puede usar un Id o una clase para restringir el selector a ciertas listas desordenadas. Por ejemplo: ul.my-class > li:last-of-type elegirá el último

        • solo de las listas desordenadas de esa clase

           $('.class')[$(this).length - 1] 

          o

           $( "p" ).last().addClass( "selected" );