Last-child does not work in css

Question

Last-child does not work in css

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (1 votes)

2

I'm trying to do a background with last-child and I do not understand very well why it does not apply the style I want. I want the last div containing the child class to have background , how can I do it? SOMETHING IS BAD.

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

asked by zerokira 26.10.2017 в 15:16

source

4 answers

3

This happens because you are applying css to class elements .hijo that 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 complies with the characteristic last-child in your case is

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

In summary, there is no div with class hijo that is the last child last-child of a container

If you delete the last div with class hermano you will see that now there is an element with class hijo that is last-child and the css will be applied correctly

EDIT:

If what you want is to always maintain that structure and keep the element div with class hermano , you just have to create a rule for class elements hijo that are the penultimate element .

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

answered by 26.10.2017 в 15:24

2

When you give this instruction:

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

You're saying:

"To the .hijo element that is the last child of your 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 div element, is not the last .hijo element, but the .hermano element.

The solution? Just remove the .hermano element from 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>

answered by 26.10.2017 в 15:29

1

To achieve this you need to change the selector, you can not use last-child because there is no element with 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>

answered by 26.10.2017 в 15:31

Memory usage in C SQL Check between date range - but a date may be NULL

score 3 · Accepted Answer

As you have already been told, the style only applies to the element. Son that is the last element of your father, 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 child class.

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