Question

I need to find the first (and last) element in a div that has a CSS margin set (> 0 px). (important: this is not necessarily the first or last element!)

Basically, I need to do this so that I can remove the margin-top for the first element and the margin-bottom for the last. Now I know you’ll probably say “why not use “p:last” CSS syntax?”

Because the first or last element can be something else as well, it could be a list (UL, OL), an image, a paragraph, etc.. I cannot simply do, ul:last, ol:last, p:last as that could result in multiple elements being matched (one per type).

I only want to apply this to a single element. So that’s why I think jquery is the only solution. I would gladly be wrong on this though.

Answer 1

Since you want only the first/last child with a margin, I imagine you’ll need to use jQuery/JavaScript:

var isfirst = 1, lastelm;
$("#divid").find("*").each(function() {
    var cur = $(this);
    if(parseInt(cur.css("margin-top")) > 0 && isfirst == 1) {
        cur.css("margin-top", 0);
        isfirst = 0;
    }
    if(parseInt(cur.css("margin-bottom")) > 0) {
        lastelm = cur;
    }
});
lastelm.css("margin-bottom", 0);