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.

[JustinKO]

Está bien como lo tienes. De hecho lo he comprobado por si se me estaba escapando algo y a mí me funciona perfectamente.

[pzin]

Claro, te muestra rojo los dos párrafos porque tienes dos párrafos que son los los primeros hijos de .capa.

¿O quieres hacer algo así?

Código CSS:

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

¿O así?

Código CSS:

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

[azaz]

Hola gracias a los dos, pzin eso es lo que queria solo el primer elemento p de su padre div con clase capa, descubri que que aparte de las opciones que me distes tambien es posible asin:

Código CSS:

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

[pzin]

Iniciado por azaz

Hola gracias a los dos, pzin eso es lo que queria solo el primer elemento p de su padre div con clase capa, descubri que que aparte de las opciones que me distes tambien es posible asin:

Código CSS:

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

Según tu markup, hace lo mismo que tu primer código. Ya que los párrafos son hijos de .capa. Y > es un selector de hijos.

Es decir:

• .capa>p afectaría a todos los párrafos
• .capa>p:first-child() a todos los primeros párrafos que sean hijos de .capa
• .capa p:first-child() a todos los primeros párrafos que sean descendientes de .capa

En tu caso, al ser todos los párrafos descendientes e hijos a la vez, no tiene sentido que digas que con eso funciona y con lo otro no.

[JustinKO]

yo desde luego entendí lo que ahora pareces confirmar, que se te pusiera rojo el primer párrafo de cada div.capa, y eso es lo que te digo que funciona y está correcto.

Como dice Pzin, en este caso es lo mismo lo uno que lo otro que propones después.