CODEWITHSUNDEEP
htmlcss
chandan
chandan

Reputation: 1574

Styling last div inside a container

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

Upvotes: 6

Views: 16700

Answers (3)

RhapX
RhapX

Reputation: 1683

You just need to change your

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

to

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

This tells it to locate the last div that is located within the div.container instead of every div within the container.

Here is the updated JSFiddle.

Upvotes: 5

dmeglio
dmeglio

Reputation: 2830

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

Upvotes: 7

Johan Karlsson
Johan Karlsson

Reputation: 6476

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>

Upvotes: 6

Related Questions