Home / Questions / 112475
Accepted
zerokira
Asked: 2020-10-27 05:16:01 +0800 CST 2020-10-27 05:16:01 +0800 CST

Last-child not working in css

  • 772

I'm trying to make a backgroundwith last-childand I don't really understand why it doesn't apply the style I want. I want the last divone that contains the child class to have the background, how can I do it? SOMETHING IS WRONG.

 <!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>

html

4 Answers

  1. This happens because you are applying cssto elements with class .hijothat they are last-child.

    This check is done inside a parent container which in this case is a 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>

    The element that meets the characteristic last-childin your case is

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

    In short, there is no such thing divas a class hijothat is the last child last-childof a container.

    If you remove the last one divwith class hermanoyou will see that now there is an element with class hijothat is last-childand it will be applied csscorrectly

    EDIT:

    If you want to always keep that structure and preserve the element divwith class hermano, you just have to create a rule for elements with class hijothat are the penultimate element .

    .hijo:nth-last-child(-n+2) {
                background: #ff0000;
            }
    • 3
  2. Best Answer

    As you have already been told, the style only applies to the .child element that is the last element of its parent, so if you want it to be as I think I am understanding, you should simply add a 'div' without styles between the elements of the class son.

        <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>
    • 3

  3. When you give this instruction:

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

    Are you saying:

    "To the element .hijothat is the last child of its parent element, I apply this style..." .

    The problem in your HTML code is that the last child of the parent element, in this case the element div, is not the last element .hijo, but the element .hermano.

    The solution? It simply removes the element .hermanofrom the HTML code.

    .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>

    • 2

  4. To achieve that you need to change the selector, you cannot use last-childit because there is no element with a child class that is the last child of the parent container, you must use :nth-child(n)and select the required element by means of its index, which in this case would be 5.

    Example:

     <!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