¿Cómo seleccionar el último elemento de una clase?

publicado por: Anonymous

Tengo el siguiente código que muestra una lista de datos:

_x000D_

_x000D_

.datos div {_x000D_
  display:inline-block;_x000D_
}_x000D_
_x000D_
.contenedor { _x000D_
  margin:20px 40px; _x000D_
}_x000D_
_x000D_
.contenedor:first-of-type { _x000D_
  margin-left: 10px; _x000D_
}_x000D_
_x000D_
.contenedor:last-of-type { _x000D_
  margin-right: 10px; _x000D_
}_x000D_
_x000D_
.separador {_x000D_
  border-left: 1px solid black;_x000D_
  height:10px;_x000D_
}_x000D_
_x000D_
.separador:last-child { _x000D_
  display: none; _x000D_
}

_x000D_

<div class="datos">_x000D_
  <div class="contenedor">DATO1</div>_x000D_
  <div class="separador"></div>_x000D_
  <div class="contenedor">DATO2</div>_x000D_
  <div class="separador"></div>_x000D_
  <div class="contenedor">DATO3</div>_x000D_
  <div class="separador"></div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

El código HTML lo genera una aplicación que no puedo modificar, pero sí tengo acceso a cambiar el CSS. Consigo esconder la última barra vertical poniendo .separador:last-child { display:none; } pero sigo teniendo un problema: el último elemento con la clase contenedor tiene demasiado margen en la derecha.

He intentado hacer .contenedor:last-of-type { margin-right: 10px; } pero parece que last-of-type no funciona cuando se utiliza con una clase. ¿Cómo puedo seleccionar ese elemento para ponerle un margen derecho de 10px?

solución

Si siempre vas a tener esa estructura contenedor-separador-contenedor-separador hay una solución. El último “contenedor” siempre será el penúltimo elemento de la serie y puedes usar la pseudo-clase nth-last-child:

NOTA: Como ha indicado @Ricky_Ruiz en los comentarios para seleccionar el penúltimo elemento la sintaxis correcta es nth-last-child(2) y no nth-last-child(-n+2) como había puesto yo que selecciona los dos últimos elementos y parecía que funcionaba porque casualmente el último elemento estaba oculto.

_x000D_

_x000D_

.datos div {_x000D_
  display:inline-block;_x000D_
}_x000D_
_x000D_
.contenedor { _x000D_
  margin:20px 40px; _x000D_
}_x000D_
_x000D_
.contenedor:first-of-type { _x000D_
  margin-left: 10px; _x000D_
}_x000D_
_x000D_
.datos :nth-last-child(2) { _x000D_
  color: red; _x000D_
}_x000D_
_x000D_
.separador {_x000D_
  border-left: 1px solid black;_x000D_
  height:10px;_x000D_
}_x000D_
_x000D_
.separador:last-child { _x000D_
  display: none; _x000D_
}

_x000D_

<div class="datos">_x000D_
  <div class="contenedor">DATO1</div>_x000D_
  <div class="separador"></div>_x000D_
  <div class="contenedor">DATO2</div>_x000D_
  <div class="separador"></div>_x000D_
  <div class="contenedor">DATO3</div>_x000D_
  <div class="separador"></div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: user7176

Leave a Reply

Your email address will not be published. Required fields are marked *