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?