Odd & Even :nth-child Selectors not working

HTML & CSS
1

Hey Gang, I’ve got a peculiar problem. I’m using :nth-child(odd) and :nth-child(even) selectors on some div’s with the class “tour-box”.

My HTML markup basically looks like this…

<div class="tour-box">
   <div class="tour-img-left">
      <img />
   </div>
   <div class="tour-content">
      <h2>CUSTOME HEADING</h2>
      Content goes here...
   </div>
</div>

<div class="tour-box">
   <div class="tour-img-right">
      <img />
   </div>
   <div class="tour-content">
      <h2>SIMPLE SETUP</h2>
      Content goes here...
   </div>
</div>

<div class="tour-box">
   <div class="tour-img-left">
      <img />
   </div>
   <div class="tour-content">
      <h2>AWESOMENESS</h2>
      Content goes here...
   </div>
</div>

<div class="tour-box">
   <div class="tour-img-right">
      <img />
   </div>
   <div class="tour-content">
      <h2>SWEET STUFF</h2>
      Content goes here...
   </div>
</div>

My ‘tour-boxes’ are not full page width and I’d like to push them to either side of the browser alternating left and right. And I’ve created little arrows which point downwards to the next box and direct the user flow. I’ve got this in my CSS

 .tour-box {
    background-color: #f1f1f1;
    padding: 2rem 4rem;
    position: relative;
    width: 80%;
    margin-bottom: 10rem;
}

.tour-box:nth-child(even) {
    float: right;
 }

.tour-box:nth-child(odd) {
  float: left;
}

.tour-box:nth-child(odd)::after {
  content:'';
  width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f1f1f1;
  position: absolute;
  bottom: -20px;
  right: 100px;
}

.tour-box:nth-child(even)::after {
  content:'';
  width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f1f1f1;
  position: absolute;
  bottom: -20px;
  left: 100px;
}

Everything was working just fine yesterday.but for some reason today, it seems like only the :nth-child(odd) selectors are being applied and they are applied event to the (even) boxes.

I can’t for the life of me figure out what has happened. You can see a live version in development at
http://couturemedia.ca/sandbox/how-it-works/ and it’s behind a wall; user: child pw: splay

Any tips on troubleshooting this would be awesome. I’ve validated HTML and the CSS only triggers an error with some media queries which I disabled for testing and which didn’t have any effect.

2

The link needs a login.

3

This is what I see in FF on a PC using the code that you posted. Please tell me what I should see.

748×1173 17.9 KB

As csosa said, the live site requires a login.

4

User Name: child

Password: splay

coothead

1 Like
5

Some somnambulist unconsciously added empty <p> tags between the .tour-box divs so only the (odd) styles are being applied.

1 Like
6

That would be the WordPress editor.
IIRC wpautop does this to aid non-techies that use WYSIWYG

Changes double line-breaks in the text into HTML paragraphs (<p>...</p>).

7

All I can say is .

Yet another reason to eschew Wordpress.

8

For those that know HTML it can be very frustrating to have it mangle perfectly good mark-up.

For those that don’t know HTML it results in something that looks OK

But yes, using p tags to create margins is cringe-worthy.

1 Like
9

A good “catch”, nonetheless, Mr. M.

10

@ronpat this codepen is perhaps more appropriate to show what I was trying to achieve…
http://codepen.io/AndrewSepic/pen/OyLEgN

11

That somnambulist must have been my alter ego. I used &nbsp; as a cheap way to space things out a bit more even though I had also placed CSS margin-bottom: of 10rem when I should have just removed the &nbsp;. WP then wrapped those non-breaking spaces in p tags.

So it seems this was really a misunderstanding of how the :nth-child() pseudo class works. As I saw those p tags and I didn’t see how they should affect the :nth-child behaviour. From my understanding the following selector

.tour-box:nth-child(odd) {..}

should only be counting (or registering) all elements with the class ‘tour-box’. which are the divs, not the <p>s. Looking at the W3C definition

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

I am surprised to see the ‘regardless of type’ at the end. And I smiled to see the suggested link to :nth-of-type as the selector which I believe would have rectified the issue?

Thanks @ronpat for spotting that & for your input @Mittineague & @coothead.

12

It is very common for coders, the first-time they use the nth-child pseudo-class, to assume that :nth-child looks at the type, class and/or ID rather than simply the number of all children. Most have never heard of the :nth-of-type pseudo-class. You are in crowded company.

<off-topic:fyi-only>
The W3Schools company is not the same as the W3Consortium that writes the web standards. The names are conveniently similar, but there is no affiliation.
The W3C reference page for selectors is here: http://www.w3.org/TR/CSS2/selector.html. I use the W3Schools site occasionally, but not as an “authoritative” reference.

1 Like
13

Thanks for the clarification on W3Schools. While the reference page on W3C seems to be more legit with them being the body which sets web standards they don’t have any info there about the nth-child selector and thus I would have been up the creek in determining where I was going wrong without W3Schools. I understand it’s because it’s a CSS3 selector, not CSS2. Is CSS3 supported by the W3C?

14

Sorry, posting that link was careless of me. The CSS 3 standards are here:

http://www.w3.org/TR/css3-selectors/

15

Though the W3C documentation may be the “ultimate” reference, I find it’s not always so easy to digest, especially when I’m tired.

I used to go to w3schools a lot ~20 years ago. And it may still be good for learning how things used to be,

One of my favorite reference sites these days is MDN (Mozilla Developer Network)
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

2 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.