CODEWITHSUNDEEP
htmlcss
Deepika
Deepika

Reputation: 300

last child selector in div

I have a parent div and 3 divs inside it. I want to hide the last child div. I tried using last-child CSS selector, but it is not working.

The order of divs:

<div class="wysibb-toolbar">
    <div class="wysibb-toolbar-container"></div>
    <div class="wysibb-toolbar-container"></div>
    <div class="wysibb-toolbar-container">//(This is to be made display:none)
        <div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
        <div class="wysibb-toolbar-btn wbb-code" jQuery110208619481903000815="71"></div>
    </div>
</div>

I have tried this:

div.wysibb-toolbar div:last-child {
    display:none;
}

Upvotes: 1

Views: 2458

Answers (3)

Aravind Sivam
Aravind Sivam

Reputation: 1099

:last-child selector matches every element that is the last child of its parent.Try this JSFIddle

 .wysibb-toolbar-container:last-child {
    display:none; 
  }

Upvotes: 0

Tuhin
Tuhin

Reputation: 3373

Try this

div.wysibb-toolbar>div:last-child {
    display:none;
}

or just

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

or More generic

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

Upvotes: 2

Stewartside
Stewartside

Reputation: 20905

Your problem is that you have mis-typed the word display and have spelt it disply

Try this out

div.wysibb-toolbar div:last-child {
  display: none;
}
<div class="wysibb-toolbar">
  <div class="wysibb-toolbar-container">Test 1</div>
  <div class="wysibb-toolbar-container">Test 2</div>
  <div class="wysibb-toolbar-container">Test 3 (should be hidden)</div>
</div>

Upvotes: 0

Related Questions