Geek asks and answers

JQuery conflicting with last css child

Right now I have a list of magazine reviews, and now I'm going to this list to show more reviews or hide some of them.

Before I included this jquery to show / hide part of the list, I had some css for the .reviewwrap class that was :last-child { border: none; }, which worked until I turned on this jquery.

My question is why all of a sudden this CSS selector doesn't work in my stylesheet when I implemented this jquery? I also tried just to make the last child in jquery if it doesn't work either.

function reviewlistCutoff() {
    var hiddenReviews = $('.reviewWrap:gt(6)').hide();

    if (hiddenReviews.size() > 0) {
        var showCaption = '...' + hiddenReviews.size() + ' More Reviews';
        $('.reviewsList').append(
        $('<span class="toggler">' + showCaption + '</span>').toggle(

        function () {
            hiddenReviews.show();
            $(this).text('...Fewer Reviews');

        }, function () {
            hiddenReviews.hide();
            $(this).text(showCaption);
        }));

    }
}
+3
source share
1 answer

.reviewWrap:last-child works fine.

, 5 .reviewWraps - - :last-child.

border-bottom .reviewWraps.

, .

border-top :first-child > :

http://jsfiddle.net/TJctn/6/

.reviewWrap { border-top: 1px solid #C9C9C9; margin: 0 0 20px; padding: 0 0 20px; }      
.reviewWrap:first-child { border-top: 0; margin: 0; padding: 0; }

.reviewWraps border-top.

, margin padding, .

0

More articles:


All Articles