last child selector in div

Question

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

You have a typo in your CSS property. It's `display`, not `disply`. If that fixes your problem, I'd recommend deleting your question to avoid downvotes/question closure. If it doesn't fix your problem, then we'll need to see more code, because `display: none;` works for me with that HTML. — TylerH, Apr 09 '15 at 14:12
yes Fabrizio, copied the markup from developer tool. I dont have access to HTML file which generated the Jquery or the UI. Can just modify the UI by overriding the classes using css file.So looking for another alternative.. — Deepika, Apr 09 '15 at 14:28
Possible duplicate of [last-child of div class](https://stackoverflow.com/questions/12959655/last-child-of-div-class) — Tom11, Oct 09 '17 at 11:23

score 2 · Answer 1 · answered Apr 09 '15 at 14:25

2

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

answered Apr 09 '15 at 14:25

Tuhin

3,335
2
16
27

score 0 · Answer 2 · answered Apr 09 '15 at 14:14

0

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>

answered Apr 09 '15 at 14:14

Stewartside

20,378
12
60
81

It seems like that was just a typo; OP has since edited his question to add the missing "a". – TylerH Apr 09 '15 at 14:18
Corrected the typo. Still not working. the last div has two divs inside genrated by jquery. Updated the code. Is the code failing due to jquery? Sorry If am being too naive. – Deepika Apr 09 '15 at 14:22
I dont have access to HTML file which generated the Jquery or the UI. Can just modify the UI by overriding the classes using css file.So looking for another alternative... – Deepika Apr 09 '15 at 14:27

Aravind Sivam · Answer 3 · 2015-04-09T14:36:04.907

0

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

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

edited Apr 09 '15 at 14:36

answered Apr 09 '15 at 14:29

Aravind Sivam

1,089
8
23

last child selector in div

3 Answers3