2

Estoy probando las etiquetas de CSS3 y la etiqueta :last-child me funciona solo en parte de mi código:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="description" content="Pagina de curso html 5" />
  <title>Nuevas reglas CSS3</title>

  <style>
    p:last-child {
      color: red;
    }
  </style>
</head>

<body>

  <p>Hola</p>
  <p>Adios</p>
  <p>Febrero</p>

  <ol>
    <li>Manzana</li>
    <li>Limon</li>
    <li>
      <p>Pera</p>
      <p>Melon</p>
      <p>Naranja</p>
    </li>
  </ol>
  <p><br>Abril</p>

</body>

</html>

Aquí el ultimo hijo p de la lista ordenada si se pone en rojo pero el hijo p del body no, no se por que. He probado quitando la ol y sigue sin funcionar.

Ayuda! Gracias.

1
  • podrias utilizar last-of-type pero tambien te seleccionaria naranja uwu Commented el 25 may. 2019 a las 14:34

2 respuestas 2

4

Esto se debe a que, aunque no lo veas, hay un elemento que se inserta antes del final del <body>. En el caso de los snippets the StackOverflow, se inserta un <script> con el código JS. Fuera de este ejemplo concreto, puede ser porque alguna herramienta que usas o algún plugin de tu navegador esté insertando algo antes del cierre del </body>.

La solución más sencilla sería envolver todo el contenido del body dentro de una etiqueta, como por ejemplo div:

p:last-child {
  color: red;
}
<div>
  <p>Hola</p>
  <p>Adios</p>
  <p>Febrero</p>

  <ol>
    <li>Manzana</li>
    <li>Limon</li>
    <li>
      <p>Pera</p>
      <p>Melon</p>
      <p>Naranja</p>
    </li>
  </ol>
  <p><br>Abril</p>
</div>

3

Si lo envuelves todo en un div contenedor funciona correctamente.

p:last-child {
      color: red;
    }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="description" content="Pagina de curso html 5" />
  <title>Nuevas reglas CSS3</title>
</head>

<body>

<div>
  <p>Hola</p>
  <p>Adios</p>
  <p>Febrero</p>

  <ol>
    <li>Manzana</li>
    <li>Limon</li>
    <li>
      <p>Pera</p>
      <p>Melon</p>
      <p>Naranja</p>
    </li>
  </ol>
  <p>Abril</p>
</div>
</body>

</html>

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.