nth-of-type miscounting

[marama]

Hello. Having some trouble with the counting of entries and the nth-of-type pseudo-selector. I wanted to alternate the background colour of the entries and tried to use this:

div#entries > div.inner > div.entry-wrapper:nth-of-type(odd)
{ background-color: #35bf9d; } /*blue*/

div#entries > div.inner > div.entry-wrapper:nth-of-type(even)
{ background-color: #525dbf; } /*green*/

But instead of the blue colour being behind the first post, it's behind the second and the green is behind the first, basically swapping the colours opposite from the code. I played around with different formulas and what seems to be happening is the first entry is being counted as the second type, with the last counted as 21 instead of 20. So at this point, I'm lost. I know if I was doing a simple alternating pattern, I could just switch the colours and be done, but I was planning to use different equations to vary it, but with the odd counting, I can't be sure if the equations will work right now.

Any help is greatly appreciated. Thank you.

Comments

[afuna]

So. The nth-of-type pseudo-class counts based on the type of the element (though the targetting of the style includes the class)

That is, the <div class="navigation"> at the very top counts as "1" in the numbering because it's of type div. It's not highlighted, however, because the class (.entry-wrapper) doesn't match.

The good news: that div is always printed, even when empty, so it'll be consistent when you're doing your calculations.

[marama]

Yeah, didn't see that/it's not displayed, so I didn't know what div it was counting. I checked the code after your reply and also found an additional bottomnav div. So basically I need to consider these two divs with whatever I'm trying to do with nth-of-type. I'm guessing this would go for nth-child as well?

In any event, your answered helped greatly as I was ready to pull some hair. Thank you!

[afuna]

Hmm, I don't think you'll need to worry about the bottomnav div, because it comes after everything else so won't affect the counting of anything before that.

I am not absolutely sure (would have to test), but I strongly believe that the same would be the case with nth-child.


PS. If you're touching S2 in addition to CSS, you can try overriding RecentPage::print_body. If not, then adjust your formulas a bit.

I'm wondering if it's worth adding another div around just the entries for all layouts in general, but there's so many divs already!

[marahmarie]

I added the code you put in your post to your journal using Web Dev in Firefox 16 (assuming your journal is what you're working on?) and it worked for me: the entries showed as blue first, then green, then blue and so on.

My first thought, of course, was why not just use .entry-wrapper-odd/.entry-wrapper-even to target the alternating colors, but if you want to vary the formula (like only applying a certain color to entries 3, 6, 9 and so on) then yeah, you'd definitely need nth-of-type to do that.

[marama]

I mentioned the bottom one as I was also experimenting with last-of-type, so yeah, it's affected. That one's an easy fix since I just tack on (2). I just hadn't realised it would count divs regardless of class/id. So my mistake there.

Not really familiar with the programming aspect of S2, but hey, sounds like a good time to get my feet wet.

I agree there really are a lot of divs, but maybe to really isolate only the entries would be useful?

[marama]

Yes, eventually I was planning on using a formula as you mentioned. I'm just testing and experimenting at this point, but I would like to use various classic art images as entry separators, using a formula to alternate between 3-4.

I'm working locally with Stylish on Firefox, since that will more than likely be the css I post directly to DW, (adjusting for any image locations once I'm satisfied), and that's where I noticed the odd behaviour.

[marahmarie]

Afuna didn't say if she saw the odd behavior or not; you're saying it shows up in Stylish; I don't use Stylish and you're not using Web Dev so given all that, if I were you, my advice might be to just add the CSS to your DW directly to see if it works out as-is or not, since there's no way of telling otherwise. Afuna's statement on it does seem to support the idea that it could be wonky as-is, but the proof's in the pudding, I suppose...

[afuna]

I've been thinking about this one, and been on the fence, because on the one hand I see your point. On the other hand, we have so many wrappers already, and this one (at least) can be worked around... So Im leaning towards "no". But if you do need help figuring out how to work on s2 on your own, let me know!

(Adding a +1 offset would likely be easier though *g*)