selecionar el primer elemento hijo no funciona

[azaz]

Que estoy haciendo mal, intento selecionar de un div con una clase su primer parrafo hijo hice algo asin:

Código CSS:

.capa p:first-child{
     color:red;
}
 

Código HTML:

<div class='capa'>
<p>contendio </p>
<p>mas contendido</p>
</div>
 
<div class='capa'>
<p>contendio2 </p>
<p>mas contendido2</p>
</div>
 

Me muestra la fuente en rojo en los dos parrafos, que estoy haciendo mal?saludos.