Not a bug Second .pageNavLinkGroup on "Recent posts" page incorrect child number in CSS

[HomerJ]

Affected version

1.5.22

This one drove me mad. On the Recent Posts page, there are 2 .pageNavLinkGroup divs, one above and one below the list of posts.

When trying to use the :nth-child() CSS selector (in EXTRA.css) to style the second one (rather than editing the template and adding an additional class name), using

.find_new_posts .pageNavLinkGroup:nth-child(2)

doesn't work...

Instead, you have to use the value 7 in order to target it. I can't figure out why? Even disabling JS doesn't correct it. I literally just kept trying numbers starting from 2 until it worked.

This however, does work:

.pageNavLinkGroup:nth-child(7) { background: red; }

 

[Mike]

I don't think the nth-child selector is doing what you're thinking. It relates to the sibling relationship in the DOM. It doesn't mean that you're targeting the second one. The 7 would indicate that there are 6 elements that have the same parent that came before it.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

 

[HomerJ]

I don't think the nth-child selector is doing what you're thinking. It relates to the sibling relationship in the DOM. It doesn't mean that you're targeting the second one. The 7 would indicate that there are 6 elements that have the same parent that came before it.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Ahh my bad then. Cheers