CSS :last-child

Question

I have a div#content with many div.item inside it. When using :last-child to make the last div.item with no border-bottom, it's OK. But, as the content is dynamically appended using php and mysql results I'm using a conditional pagination table that will be appended after the last div.item which means at the bottom of the div#content. Here will be the problem as the CSS :last-child will not recognize the last div.item as the last-child. my CSS looks like:

div#content div.item:last-child {
  border-bottom: none;
}

as you can see I'm defining that the last child id such a div.item

Any suggestions please. thanks in advance.

!!!!! Please note that the problem is not in the fact that the content is dynamic but in the fact that the CSS :last-child doesn't recognize the div.item as the last child but the last element in the div#content despite telling the CSS that it's:

div#content div.item:last-child

Answer 1

One possibility I can think of is that you're appending elements that aren't <div>s and/or don't have the item class. Check the output of your PHP/MySQL script and see if there are any non-div.item elements beside (in DOM terms) the div.item elements.

Such elements will not match the selector:

div#content div.item:last-child

That selector finds only <div>s with item class, that are the last child of div#content.

Here's an example.

Before appending

<div id="content">
  <div class="item"></div> <!-- [1] Selected -->
</div>

After appending

<div id="content">
  <div class="item"></div> <!-- [2] Not selected -->
  <div></div>              <!-- [3] Not selected -->
</div>

What's being selected, what's not, and why?

1. Selected
   This <div> element has the item class, and it's the last child of div#content.

   It exactly matches the above selector.

2. Not selected
   This <div> element has the item class, but is not the last child of div#content.

   It doesn't exactly match the above selector; however, it can possibly match either one of these selectors:

   /* Any div.item inside div#content */
   div#content div.item
   
   /* The last div.item child of its parent only */
   div#content div.item:last-of-type
   

3. Not selected
   Although this <div> element is the last child, it does not have the item class.

   It doesn't exactly match the above selector; however, it can possibly match this:

   /* Any div that happens to be the last child of its parent */
   div#content div:last-child