Menu
Firstly here's the fiddle.
I'm trying to style last div which is inside another div with class 'container'. ':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'm trying to style 'div-four'.
CSS code:
div.container:last-child{
display: none;
}
509
The last-child selector basically takes the current selector and finds the last child of its parent. So in your case, div.container:last-child says "all the divs with the container class that are the last child of their parent." Well in your case the parent is <body> and the last child matching is the <div class="container"> What you want is div.container > *:last-child which will find the last child of the div.container
186
div.container:last-child will select every children of div.container that is the last child of its parent, which in your case includes the <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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
