p:first-child precedido de otro tag no funciona

[alivan]

Hoy me di cuenta de esto y me estuve comiendo la cabeza un buen rato. ¿Por qué si hago esto no funciona? Es muy curioso... ¿Hay alguna razón?

Código HTML:

<style type="text/css">
section p:first-child{
    color: green;
}
</style>
 
<section>
    <div>
        <ul>
            <li>lista con</li>
            <li>varios elementos</li>
        </ul>
        <p>Párrafo coloreado</p>
        <p>Otro párrafo</p>
    </div>
</section>
 

¿No se permite usar el selector :first-child cuando en la misma capa les preceden otros elementos distintos?

En este caso la solución es simple, se puede usar ul+p, pero aun así me intriga.

[pzin]

Hola alivan.

Estuve toqueteando porque me dio curiosidad también. Mis conclusiones:

Lo más curioso es que así si funciona:

Código CSS:

section div:first-child{...}
section ul:first-child{...}
section li:first-child{...}
 

También funciona cuando quitas completamente <ul> y <li>.

Luego leyendo la biblia:

Iniciado por w3c

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Es decir, en este caso P no es el primer hijo de DIV, es el segundo (el primero es UL). Lo que explica que funcione de la manera arriba mencionada.
Por lo que creo que en tu última pregunta está la respuesta.

No me gusta decir estas cosas sin estar seguro, pero yo lo interpreto así. Si viene algún maestro por aquí para confirmarlo me quedo más tranquilo.

[kseso?]

Efectívamente, Bonez, el pseudoselector no se lee como "el primer p hijo de..." sino "el primer elemento que siendo p sea el primer hijo de"
Hay una doble condición.

En este caso yo utilizaría el selector:

Código CSS:

section p:nth-of-type(-n+1){
    color: green;
}
 

[alivan]

Claro, yo lo había entendido como "el primer p hijo de...", y me chocó un poco. Quizás error por mi parte por no leer bien la documentación.

Muchas gracias por las respuestas.