1

Estoy tratando de hacer dos lineas con unas características, con la clase linea. Cuando intento aplicar un estilo diferente a la segunda linea, utilizando los pseudo-selectores no funciona.

.linea{
    position: relative;
    width: 40%;
    height: 3px;
    background-color: orange;
    left: 00px;
    display: block;
}

La idea es cambiar el color y el margen. He probado con los selectores: .linea:last-child y .linea:nth-child(2) y no funciona con ninguna de las dos.

Decir que se trata de un div, y que no están dentro de ningun otro contenedor, directamente en el body del documento.

0

1 respuesta 1

2

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>

3
  • Pero el contenedor sería el body del documento, no? O debe estar incluido en un contenedor div?
    – Jogofus
    Commented el 2 may. 2017 a las 1:34
  • El elemento <body> podría ser el contenedor, eso es correcto, siempre y cuando no haya ningún otro elemento al mismo nivel de los elementos del selector.
    – Shaz
    Commented el 2 may. 2017 a las 1:43
  • Por favor agrega tu código HTML para poder responder adecuadamente la pregunta.
    – Shaz
    Commented el 2 may. 2017 a las 1:58

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.