Según la especificación de nivel 3 de css, para que la pseudoclase :last-child
funcione, debe haber un elemento contenedor del selector al cual se aplica.
En teoría el mismo principio aplica para :nth-child
.linea {
position: relative;
width: 40%;
height: 30px;
background-color: orange;
left: 0;
display: block;
}
.linea:last-child {
background-color: green;
}
.linea:nth-child(2) {
background-color: blue;
}
<div>
<div class="linea">Línea 1</div>
<div class="linea">Línea 2</div>
<div class="linea">Línea 3</div>
<div class="linea">Línea 4</div>
<div class="linea">Línea 5</div>
</div>
Si hay otros elementos distintos a los cubiertos por el selector, aparentemente "deja" de funcionar la pseudoclase, pero no es así, simplemente se está utilizando de forma incorrecta según la especificación de CSS, pues last-child
fue creado para seleccionar el último elemento de un determinado nivel, no para aplicarse al último elemento de una clase específica como lo pretendes hacer:
.linea {
position: relative;
width: 40%;
height: 30px;
background-color: orange;
left: 0;
display: block;
}
.linea:last-child {
background-color: green;
}
.linea:nth-child(2) {
background-color: blue;
}
<div>
<div class="linea">Línea 1</div>
<div>Texto</div>
<div class="linea">Línea 2</div>
<div class="linea">Línea 3</div>
<div>Texto</div>
<div class="linea">Línea 4</div>
<div>Texto</div>
<div class="linea">Línea 5</div>
<div>Más texto</div>
</div>