1

For this particular site, when I utilize nth-child via CSS or jQuery, the 'nth-child' selector is capturing the wrong element. I'm getting one child before the selector that I'm calling:

.home article:nth-child(3) {} //captures 2nd child

This seems to be capturing the second child instead. If I attempt:

.home article:nth-child(1) {} //captures nothing

This captures no elements. In jQuery, it shows up as an empty array. Here's the dev site that I'm working on. Thank you.

http://heilbrice.designliftoff.com/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user1549093
  • 13
  • 1
  • 3

1 Answers1

7

In your site, you have a clearfix div that's the first child of its parent element within your container, so your first article is really the second child, not the first:

<div class="row-main clearfix">
    <div class="clearfix"></div>  <!-- .row-main.clearfix > :nth-child(1) -->

    <article id="post-" class=""> <!-- .row-main.clearfix > :nth-child(2) -->

In CSS, you can use :nth-of-type() instead to reach the third article element:

/* Select the 3rd article in its parent within .home */
.home article:nth-of-type(3) {}

Oddly enough, jQuery does not support :nth-of-type(), so for a cross-browser solution you have to opt with :eq() with a zero-based index:

// Select the 3rd article within .home
$('.home article:eq(2)')
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Aha. Thank you for pointing out that the empty div was doing that. I removed said div and will keep this in mind. Thanks. – user1549093 Jul 24 '12 at 15:15
  • :eq() fixed an issue with my app running on Safari / iPad with iOS 8.2. I had been using :nth-child() which worked with iOS 8.1 and all other major browsers. The :nth-child(2) selector returned a jQuery object with length = 0 when there were in fact 2 elements. – Norman Cousineau Jan 23 '15 at 13:57
  • @normc: Wow, what a curious case. I hope it gets fixed before GM. – BoltClock Jan 23 '15 at 14:22