Question

I’m playing with new CSS3 selectors and pseudo class and I’m trying to use the :nth-child pseudo class.

If I look the documentation here:
http://www.w3schools.com/cssref/sel_nth-child.asp

I see and example with :

p:nth-child(3n+0)
{
  background:#ff0000;
}

But if I look the result ( http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child_formula ), I don’t understand why the first red element is the second one and not the third or the first.

What is the logic behind this ?

Answer 1

The second paragraph is the third child:

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>

if you wanted to start with the third paragraph, try :nth-of-type instead:

p:nth-of-type(3n){
    background: #F00
}

W3Schools isn’t always the clearest resource, and sometimes it’s very wrong. Be careful when using it.