Geek Answers Handbook

Stacking the last div inside the container

Firstly, here is the fiddle .

I am trying to create the last div that is inside another div with the class container. The last-child selector does not work.

HTML code:

<div class="container"> <div class="div-one"> <h5> This is Div One </h5> </div> <div class="div-two"> <h5> This is Div Two </h5> </div> <div class="div-three"> <h5> This is Div Three </h5> </div> <div class="div-four"> <h5> This is Div Four </h5> </div>

I am trying to create a "div-four".

CSS code:

 div.container:last-child{ display: none; }
+4
source share
3 answers

div.container:last-child will select each child div.container , which is the last child of its parent, which in your case includes <h5> elements.

Try this instead:

 div.container div:last-child{ display: none; } 

 div.container div:last-child{ display: none; } h5{ font-family: Montserrat; color: #49c8ff; font-size: 22px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; } 
 <div class="container"> <div class="div-one"> <h5> This is Div One </h5> </div> <div class="div-two"> <h5> This is Div Two </h5> </div> <div class="div-three"> <h5> This is Div Three </h5> </div> <div class="div-four"> <h5> This is Div Four </h5> </div> </div>
+5
source

You just need to change

 div.container:last-child { display: none; }

to

 div.container div:last-child { display: none; }

This means finding the last div that is inside the div.container , and not every div inside the container.

Here is the updated JSFiddle .

+4
source

The last-child selector basically accepts the current selector and finds the last child of its parent. So in your case div.container:last-child says "all divs with a container class that are the last descendant of their parent." In your case, the parent element is <body> , and the last match to the child is <div class="container"> . What you want is div.container > *:last-child , which will find the last child of div.container

+3
source

More articles:


All Articles