Skip to main content
se añadieron 1182 caracteres en el cuerpo
Origen Enlace
Shaz
  • 29.2k
  • 18
  • 40
  • 61

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>

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>

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>

Origen Enlace
Shaz
  • 29.2k
  • 18
  • 40
  • 61

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>