¿Cómo puedo conseguir el último elemento (h) desde el siguiente código:CSS3 acceder al último elemento
<div>
<div>
<span class="hr"></span>
</div>
<div>
<span class="hr"></span>
</div>
<div>
<span class="hr"></span> <!-- I need this -->
</div>
</div>
.hr:last-child no funciona para esto.
Por supuesto, la estructura DOM podría ser más complicada. Solo necesito buscar el último elemento necesario.
Tu pregunta no está del todo clara; Hay varias formas de obtener el último elemento .hr de su ejemplo, pero dice que "la estructura DOM podría ser más complicada". Para responder a su pregunta, debe mencionar las posibles estructuras DOM que podría tener; en algunos podría ser posible, en algunos no lo será.
Aquí es una manera de conseguir la .hr de la última div:
div div:last-of-type .hr
Ésta es otra manera de obtener el .hr salir del último hijo del exterior div:
div :last-child .hr
Si Necesita obtener el último elemento .hr del documento, independientemente de su contenido, y luego no puede hacerlo en CSS. En CSS, solo puede seleccionar el primer, último o n elemento en un nivel particular de la jerarquía, no puede seleccionar el último elemento de algún tipo independientemente de en qué esté anidado.
div:last-child .hr
si DOM es complicado, no puedo ser Shure · h que habrá en div ... –
Entonces usted debe colocar algo así como un 'class' en aquellos que contienen elementos 'div' para identificar ese tipo de elemento. Una vez hecho esto, cambia 'div' por' .class'. –
No, no es una solución. –
Lo siguiente selector debería funcionar:
div *:last-child *:last-child
demostración: https://jsfiddle.net/78w3bofg/1/
Gran publicación. 'sin importar lo que hay dentro, entonces no se puede hacer eso en CSS', 5 años más tarde, ¿sigue siendo igual? Solo curiosidad, gracias! –
No creo que nada haya cambiado con respecto a esto. [Selectores de CSS Nivel 4] (https://drafts.csswg.org/selectors/#the-nth-child-pseudo) extiende '' nth-last-child() 'y': nth-last-of-type() 'para permitir la especificación de un selector adicional que restrinja el conjunto de elementos con los que se está comparando, para poder seleccionar el último elemento con la clase' .hr' de un conjunto de hermanos con ': nth-last-child (1 de .hr) '. Sin embargo, no permiten seleccionar todos los elementos en el documento, solo de los hermanos de un elemento principal común. Y creo que aún no hay navegadores compatibles con esta sintaxis; es un borrador –
[Borradores previos del Nivel 4 de selectores CSS] (http://www.w3.org/TR/2013/WD-selectors4-20130502/#the-nth-last-match-pseudo) tenía un ': nth -last-match (1 of .hr) 'pseudoclase que haría lo que la pregunta original planteaba, pero se eliminó, probablemente por ser poco práctico de implementar. –