Nth-child pseudoclass


#1

I'm having trouble understanding how the nth-child and first-child works. For example:

<body>
	<h3 class="elegante">Inicio</h3>
	<p class="elegante">Este es el inicio de la pagina.</p>
	<p id="serio">Este es el segundo parrafo.</p>
	<p>Este es el tercer parrafo.</p>
</body>

I understood that if I put in my CSS p:nth-child(3), it should grab the 3rd p, but it doesn't; the only way it works is if I write p:nth-child(4). I also understood that if I write body:nth-child(4), it should change the 3rd p which is the 4th child of the body, but it doesn't (in fact, if I write "body" with any 'child' pseudoclass, it doesn't work). Could you please explain?


#2

if you write body :nth-child(4), nth-child(4) will select the 4th element inside body. (note the space here between body and the colon)

You could also write p:nth-child(4), where many people get confused is that they think nth-child counts only the element specified (p in this case), it doesn't. it counts all elements, and if the 4th element is a paragraph, apply the css between curly brackets. A better way to explain this, would be that p:first-child doesn't get "executed" because the first element is h3, not a paragraph.

If you want to only count the paragraphs, you are going to need nth-of-type, you could use p:nth-of-type(3) to get the third paragraph (4th element), this will however not pass the exercise