Home/ Questions/Q 709299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T04:29:19+00:00

I have the following selectors: .progress:nth-child(3n+1) { background: teal; } .progress:nth-child(3n+2) { background: red;

  • 0

I have the following selectors:

.progress:nth-child(3n+1) {
    background: teal;
}

.progress:nth-child(3n+2) {
    background: red;
}

.progress:nth-child(3n+3) {
    background: blue;
}

However all of the items end up with a teal background. Are these selectors correct? I’m thinking I should get:

  1. Teal (every 3, starting with 1)
  2. Red (every 3, starting with 2)
  3. Blue (every 3, starting with 3)
    etc.

I’ve tested on Firefox 3.5.8 and Opera 10.10 on Ubuntu. Also tested with nothing but these rules in the CSS. I’m using the YUI Reset stylesheet but excluding it does nothing.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your CSS seems to be correct, assuming the following HTML:

    <div class="progress">1</div>
<div class="progress">2</div>
<div class="progress">3</div>

    Perhaps you misunderstood the meaning of :nth-child, and your combination of HTML/CSS is incorrect.

    foo:nth-child doesn’t mean ‘every element that is the the nth child of foo’ but ‘every nth foo element’.

    Pro tip: use the :nth-child() tester. Or this one: http://leaverou.me/demos/nth.html

    • 0