¿Cómo selecciono el "último hijo" con un nombre de clase específico en CSS? [duplicar]
<ul>
<li class="list">test1</li>
<li class="list">test2</li>
<li class="list">test3</li>
<li>test4</li>
</ul>
¿Cómo selecciono el "último hijo" con el nombre de la clase: lista ?
<style>
ul li.list:last-child{background-color:#000;}
</style>
Sé que el ejemplo anterior no funciona, pero ¿hay algo similar a esto que sí funcione?
IMPORTANTE:
a) No puedo usar ul li:nth-child(3), porque puede pasar que esté en el cuarto o quinto lugar también.
b) Sin JavaScript.
Jun 19
'11 15:06
Esto se puede hacer usando un selector de atributos.
[class~='list']:last-of-type {
background: #000;
}
Selecciona class~una palabra completa específica. Esto permite que el elemento de su lista tenga múltiples clases si es necesario, en varios orden. Aún encontrará la "lista" de clases exacta y aplicará el estilo a la última.
Vea un ejemplo funcional 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
Puedes usar el selector de hermanos adyacente para lograr algo similar, eso podría ayudar.
.list-item.other-class + .list-item:not(.other-class)
Apuntará efectivamente al elemento inmediatamente siguiente 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 únicamente 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 aplicar estilo al primero . El truco consiste en 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;
}<ul>
<li class="list">0</li>
<li>1</li>
<li class="list">2</li>
</ul>
<ul>
<li>0</li>
<li class="list">1</li>
<li class="list">2</li>
<li>3</li>
</ul>
No puede apuntar a la última instancia del nombre de clase en su lista sin JS.
Sin embargo, es posible que no se quede sin suerte con CSS, dependiendo de lo que desee lograr. Por ejemplo, al usar el siguiente selector de hermanos, agregué un divisor visual después del último de sus .listelementos aquí: http://jsbin.com/vejixisudo/edit?html,css,output
