CSS3 nth：子编号

Question

I have a problem with my html page. In this case, why the 1st element of p attribute is consider like the 2nd element ?

 /* This won't work */ #div1 p:nth-child(1) { background: #ff0000; } /* This will work */ #div2 p:nth-child(2) { background: #ff0000; } 

 <div id="div1"> <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> </div> <div id="div2"> <h1>This is a heading</h1> <p>The first paragraph.</p> <p>The second paragraph.</p> <p>The third paragraph.</p> <p>The fourth paragraph.</p> </div> 

http://jsfiddle.net/34bz28a0/

Thank you

Answer 1

You need to use nth-of-type(1) instead of nth-child() since the latter will calculate the order irrespective of the element type.

p:nth-child(1) will not work because the paragraph is not the first element of the parent.

 p:nth-of-type(1) { background: #ff0000; } 

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

Answer 2

nth-child counts the number of child elements in relation to parent. If you only want to count p elements, you should use nth-of-type , ie

p:nth-of-type(1) {
    background: #ff0000;
}

Your updated JSFiddle

Answer 3

You could use the :first-child pseudo-selector instead.

Try this:

#div1 p:first-child {
  ...
}

Answer 4

The reason your selector didn't work when using p:nth-child(1) is that the selectors work like and IF statement with AND between rules that are not separated by some specifier (such as space character or > , ~ and so on). For example, the selector div.myClass matches <div> elements whose class is myClass . The same hold for pseudo classes: div:hover matches <div> elements that are being hovered. In your case, the combination is p:nth-child(1) which picks <p> elements that have 0 (the formula is an+b-1 ) sibling before it in the document tree, and there are no such elements. With p:nth-child(2) you get the 2nd element that is also a <p> .

As far as solving this, the most obvious solutions are to either use :nth-child(2) to pick the 2nd sibling regardless of type, or p:nth-of-type(1) ¹ (or simply p:first-of-type ) to match the 1st element of type <p> .

¹ A note about nth-of-type(an+b) : this pseudo-class matches elements that are the n _th of their type, regardless of a leading type selector. See next snippet:

 :nth-of-type(2) { color: red; } 

 <span>span</span> <span>span</span> <span>span</span> <b>b</b> <b>b</b> <b>b</b>