CSS :last-child

Question

Hello! 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

you could use javascript to refresh the CSS only. See here: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/

Another approach would be to use a library like jQuery and fire this line of script every time you add new divs. (or maybe you're using another js library, as you say that you are dynamically adding divs to the page)

$('div#content div.item:last-child').css('borderBottom','none');

you might need to reset borders before you do the above though. i.e. the previous 'last' div may still not have the border bottom. so reset all borders then fire the script to remove the border for the last one.

Answer 2

It seems appending items dinamically does not make the layout engine re-run some CSS rules like :last-child.

I think you can re-read/reload CSS file making the rule apply. Don't know, it's a guess.

Another possibility is dinamically set the styles.

---

EDIT: It seems you have a CSS x Browser problem.

Check this out: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors

Answer 3

Please note that :last-child is not supported in IE. What browser are you using?

Answer 4

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