3

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

.datos div {
  display:inline-block;
}

.contenedor { 
  margin:20px 40px; 
}

.contenedor:first-of-type { 
  margin-left: 10px; 
}

.contenedor:last-of-type { 
  margin-right: 10px; 
}

.separador {
  border-left: 1px solid black;
  height:10px;
}

.separador:last-child { 
  display: none; 
}
<div class="datos">
  <div class="contenedor">DATO1</div>
  <div class="separador"></div>
  <div class="contenedor">DATO2</div>
  <div class="separador"></div>
  <div class="contenedor">DATO3</div>
  <div class="separador"></div>
</div>

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?

0

2 respuestas 2

2

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.

.datos div {
  display:inline-block;
}

.contenedor { 
  margin:20px 40px; 
}

.contenedor:first-of-type { 
  margin-left: 10px; 
}

.datos :nth-last-child(2) { 
  color: red; 
}

.separador {
  border-left: 1px solid black;
  height:10px;
}

.separador:last-child { 
  display: none; 
}
<div class="datos">
  <div class="contenedor">DATO1</div>
  <div class="separador"></div>
  <div class="contenedor">DATO2</div>
  <div class="separador"></div>
  <div class="contenedor">DATO3</div>
  <div class="separador"></div>
</div>

3
  • 1
    Esto es lo que buscaba, porque el número de datos es variable; entonces funciona independientemente del número de contenedores-separadores que tenga
    – Alvaro Montoro
    Commented el 3 nov. 2016 a las 10:46
  • 1
    El selector realmente sería :nth-last-child(2), tal como está selecciona los últimos dos elementos de la lista, pero como el último hijo tiene display: none; no afecta.
    – Ricky Ruiz
    Commented el 7 nov. 2016 a las 4:12
  • 1
    @Ricky_Ruiz tienes razón, luego lo corrijo
    – user7176
    Commented el 7 nov. 2016 a las 6:23
2

last-of-type solamente sirve para seleccionar el último elemento de ese tipo (div) del contenedor, no importa la clase que tiene. Para seleccionarlo, debes usar nth-child():

.datos div {
  display:inline-block;
}

.contenedor { 
  margin:20px 40px; 
}

.contenedor:first-of-type { 
  margin-left: 10px; 
}

.contenedor:nth-child(5) { 
  margin-right: 10px; 
}

.separador {
  border-left: 1px solid black;
  height:10px;
}

.separador:last-child { 
  display: none; 
}
<div class="datos">
  <div class="contenedor">DATO1</div>
  <div class="separador"></div>
  <div class="contenedor">DATO2</div>
  <div class="separador"></div>
  <div class="contenedor">DATO3</div>
  <div class="separador"></div>
</div>

Tendrías que cambiar el número dentro de los paréntesis para que esté de acuerdo con el número de elementos que tienes, y si la estructura siempre va a ser lo mismo, la respuesta de @blonfu también es otra opción que, en ese caso, sería mejor.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.