CSS Last-Child Selector - affecting all my DIVs?

Question

I have the following

CSS

.streamBox {
 font-size:12px;
 background-color:#EDEFF4;
 border-bottom:1px solid #E5EAF1;
 margin-top:2px;
 padding:5px 5px 4px;
}
.streamBox:last-child {
   border: none;
}

HTML

<ul id="activityStream">

 <li class="story">
  <div class="streamBox nobkgcolor" id="">
  Stuff
  </div>
 </li>

 <li class="story">
  <div class="streamBox nobkgcolor" id="">
  Stuff
  </div>
 </li>

 <li class="story">
  <div class="streamBox nobkgcolor" id="">
  Stuff
  </div>
 </li>

</ul>

I thought the last-child selector would make it so the last DIV doesn't hav ea border... But instead all DIVs now don't have borders? y?

Suggestions on how w CSS to make it so JUST the last div doesn't have the border?

Thanks,

Answer 1

For updated question:

Your selector needs a tweak, it should be:

li:last-child .streamBox {
  border: none;
}

The <div class="streamBox"> is both the first and last child of its parent, so your current selector matches all of them, instead you want the <div> inside the last <li>, so use the :last-child on the <li>, you can test it here (I changed the border to black to make it more obvious).

For previous question: It's because you're missing a quote on the class="" attribute, fix it like this:

<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>​​​​

It'll then work as intended, the first 3 having borders, you can test it here.