Geek Answers Handbook

CSS: the last child

I have a div#content with many div.item inside it. When using :last-child to create the last div.item without border-bottom , this is OK. But, since content is dynamically added using php and mysql results, I use a conditional pagination table that will be added after the last div.item , which means div#content below. There will be a problem here because CSS :last-child will not recognize the last div.item as last-child. my CSS looks like this:

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

as you can see, I determine that the last child id is such a div.item

Any suggestions please. thanks in advance.

!!!!! Note that the problem is not that the content is dynamic, but that CSS: last-child does not recognize div.item as the last child, but the last element in the content div #, despite the fact that CSS is :

 div#content div.item:last-child
+4
source share
3 answers

I might think that you are adding elements that are not <div> and / or do not have the class item . Check the output of your PHP / MySQL script and see if there are any div.item elements (in DOM terms) div.item elements.

Such elements will not match the selector:

 div#content div.item:last-child

This selector only detects a <div> with the class item , which is the last child of div#content .

Here is an example.

Before adding

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

After adding

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

What is chosen, what is not, and why?

  • Selecteded
    This <div> element has an item class, and it is the last child of div#content .

    It exactly matches the selector above.

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

    It does not match the selector above; however, it can match 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

  • Not chosen
    Although this <div> element is the last descendant, it does not have an item class.

    It does not match the selector above; however, perhaps this may correspond to:

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

It seems that adding elements dynamically does not cause the layout engine to re-run some CSS rules, such as: last-child.

I think you can re-read / reload the CSS file by creating a rule. I don’t know, this is a hunch.

Another option is to dynamically set styles.

EDIT: It seems you have a problem with the CSS browser.

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

0
source

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

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

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

You may need to reset the border before you do all of the above. that is, the previous “last” div may still not have a lower bound. so reset all borders then run the script to remove the border for the last.

-1
source

More articles:


All Articles