0

I am using infinite scroll of my local theme here and it is causing some CSS issues. I was hoping if I ran this by some of you, you might have a solution to offer.

This is pretty much the layout:

#wrap {
width: 938px;
overflow: hidden;
background-color: aqua;
border: 1px solid white;
padding: 5px 5px;
}

.one {
width: 33.04904051172708%;
float: left;
}

#wrap .one:nth-of-type(3n+1) {
margin-right: 4px;
}

#wrap .one:nth-of-type(3n) {
maring-left: 4px;
}


<div id="wrap">
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
</div>

With that, I pretty much have everything looking as I want.

This is how the markup would look with the Infinite scroll:

<div id="wrap">
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div id="infscr-loading"></div> <!-- problem -->
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>

</div>

The issue is,Infinite Scroll loads a <div> called infscr-loading at every pagination break and this throws off my :nth-of-type. For some reason the infscr-loading is counting towards the #wrap .one:nth-of-type

Perhaps I understand nth-of-type incorrectly, but shouldn't (with the way I have it set up) only .one classes count towards it?

Is there any way to get :nth-of-type to ignore a div?

As always, any help would be greatly appreciated.

  • 2
    Please add markup example after infinite scroll triggered to compare to what you start with. Also note that this seems closer to pure CSS question and might be better asked at Stack Overflow. – Rarst Jul 5 '13 at 20:46
  • editing post now to add that – Jacob Jul 5 '13 at 21:04
1

You've got to take the type in :nth-of-type() literally. It only takes into account the type of the element (in this case DIV). The selector doesn't matter.

:nth-of-type() works the same, except that it only considers element of the given type.

http://quirksmode.org/css/selectors/nthchild.html

Unfortunately I can't imagine there is a nice solution for the moment. Maybe you can hardcode #infscr-loading to be delivered as <p>. Then your existing code will work.

  • That makes sense; thank you for the information. I'll have to explore some options; maybe change some things around so I don't need to rely on :nth-of-type. – Jacob Jul 5 '13 at 22:55
1

I know it's an old post but I am posting it in case someone else deals with the same issue.

I had a similar problem where a hidden nav element and the infinite loader span were messing with my nth-childs. My items were <article> and not divs. I finally managed to solve it with the following jQuery:

$( document.body ).on( 'post-load', function () {
    $('.posts-navigation, .infinite-loader').remove();
} );

Practically, as soon as the new posts were loaded, I removed the elements that were messing with the layout. It's not elegant, but it worked.

0

The Infinite Scroll implementation in Jetpack implements the infinite-loader element as a span instead of as a div, to prevent this sort of problem. Thus, if your posts are in divs, then the span can be ignored.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.