:nth-child() and :nth-of-type() not working

Question

Here's a codepen with my code massively simplified, and it still doesn't work. :nth-child works on the w3schools interactive coding page, so it isn't my computer.

.postPrevWrap:nth-child(odd) {
  background: red;
}

<div class="postPrevWrap">
  <div class="postPrev">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="postPrev">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

https://codepen.io/anon/pen/dQzYwj

What am I doing wrong?

`nth-child` refers to element targeted as a child of it's parent. If you want the odd `.postPrev` target that class. — Steven B., Nov 16 '18 at 20:31
Note that pseudo-classes like nth-child apply to elements, not classes of elements, and adding a class effectively turns the selector into a filter. — j08691, Nov 16 '18 at 20:33

score 3 · Accepted Answer · answered Nov 16 '18 at 20:31

3

:nth-child should be applied to the child itself, not the wrapper:

So instead of:

.postPrevWrap:nth-child(odd)

do this:

.postPrev:nth-child(odd)

answered Nov 16 '18 at 20:31

frontend_dev

1,693
14
28

Or `.postPrevWrap > div:nth-child(odd)` – j08691 Nov 16 '18 at 20:33
@j08691 or we simply add a space to his selector – Temani Afif Nov 16 '18 at 20:36

:nth-child() and :nth-of-type() not working

1 Answers1