2

Estoy tratando de hacer un background con last-child y no entiendo muy bien por que no aplica el estilo que deseo. Quiero que el ultimo div que contenga la clase hijo tenga el background, como puedo hacerlo?. ALGO ESTA MAL.

 <!DOCTYPE html> 
 <html> 
 <head>   
    <style type="text/css">
        
        .hijo {
            display: block;
            width: 100px;
            height: 100px;
            border:1px solid red;
        }


        .hijo:last-child {
            background: #ff0000;
        }

        .hermano {
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid green; 
        }

    </style>
</head> 
<body>   
    <div style="width: 100%; height: 100vh; border: 1px solid #000;">
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hermano"></div>
    </div>
</body>
</html>

4 respuestas 4

3

Como ya te han dicho, el estilo solo aplica al elemento .hijo que sea último elemento de su padre, por lo que si quieres que quede como creo que estoy entendiendo, simplemente deberías añadir un 'div' sin estilos entre los elementos de la clase hijo.

    <div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
    </div>
    <div class="hermano"></div>
1
  • 1
    A esto quería llegar muchas gracias amigo :) esta es la respuesta
    – zerokira
    Commented el 26 oct. 2017 a las 13:36
3

Esto ocurre porque estas aplicando css a los elementos con clase .hijo que sean last-child.

Esta comprobacion se hace dentro de un contenedor padre que en este caso es un DIV

<div style="width: 100%; height: 100vh; border: 1px solid #000;">
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hermano"></div>
    </div>

El elemento que cumple con la característica last-child en tu caso es

<div class="hermano"></div>

En resumen, no existe ningun div con clase hijo que sea el último hijo last-child de un contenedor

Si eliminas el último div con clase hermano verás que ahora si existe un elemento con clase hijo que sea last-child y se aplicará el css correctamente

EDITO:

Si lo que pretendes es siempre mantener esa estructura y conservar el elemento div con clase hermano, solo tienes que crear una regla para los elementos con clase hijo que sean el penúltimo elemento.

.hijo:nth-last-child(-n+2) {
                background: #ff0000;
            }
1
  • Ok, listo pero como puedo hacer algo parecido a last-child para aplicar estilos a ese ultimo div con clase .hijo
    – zerokira
    Commented el 26 oct. 2017 a las 13:26
2

Cuando das esta instrucción:

.hijo:last-child {
     background: #ff0000;
 }

Estás diciendo:

"Al elemento .hijo que es el último hijo de su elemento padre, le aplico este estilo...".

El problema en tu código HTML, es que el último hijo del elemento padre, en este caso, el elemento div, no es el último elemento .hijo, sino que el elemento .hermano.

¿La solución? Simplemente remueve el elemento .hermano del código HTML.

.hijo {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.hijo:last-child {
  background: #ff0000;
}
<div style="width: 100%; height: 100vh; border: 1px solid #000;">
  <div class="hijo">
    <p>ESTO ES UN TEST</p>
  </div>
  <div class="hijo">
    <p>ESTO ES UN TEST</p>
  </div>
  <div class="hijo">
    <p>ESTO ES UN TEST</p>
  </div>
  <div class="hijo">
    <p>ESTO ES UN TEST</p>
  </div>
  <div class="hijo">
    <p>ESTO ES UN TEST</p>
  </div>
</div>

1
  • pero necesito que el elemento .hermano siempre este, no puedo eliminarlo.
    – zerokira
    Commented el 26 oct. 2017 a las 13:31
1

Para lograr eso necesitas cambiar de selector, no puedes usar last-child por que no existe un elemento con clase hijo que sea el último hijo del contenedor padre, debes usar :nth-child(n) y seleccionar el elemento requerido por medio de su índice que en este caso seria el 5.

Ejemplo:

 <!DOCTYPE html> 
 <html> 
 <head>   
    <style type="text/css">
        
        .hijo {
            display: block;
            width: 100px;
            height: 100px;
            border:1px solid red;
        }


        .hijo:nth-child(5) {
            background: #ff0000;
        }

        .hermano {
            display: block;
            width: 100px;
            height: 100px;
            border: 1px solid green; 
        }

    </style>
</head> 
<body>   
    <div style="width: 100%; height: 100vh; border: 1px solid #000;">
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hijo">
            <p>ESTO ES UN TEST</p>
        </div>
        <div class="hermano"></div>
    </div>
</body>
</html>

1
  • Exactamente es lo que quiero algo asi, pero entonces quiero que no sea mediante indicie sino que sea dinamico, es decir, necesito crear ese estilo independientemente si son 3 div con la clase .hijo o si son 5 div con la clase .hijo, asi que no puedo crearlo con el indice. TIENE QUE SER DINAMICO
    – zerokira
    Commented el 26 oct. 2017 a las 13:34

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.